JS DOM（文档对象）
attribute（属性） element（元素） new stye （新的样式）
可能因为全是文字的原因很多朋友不爱看，但是确实很有用。
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有元素：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件
如何改变 HTML 元素的内容
如何改变 HTML 元素的样式（CSS）
如何对 HTML DOM 事件作出反应
如何添加和删除 HTML 元素
在 DOM 中，所有 HTML 元素都被定义为对象。
属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。
方法是您能够完成的动作（比如添加或删除 HTML 元素）。
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性。var element= element. innerHTML
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 和 。
element.innerHTML = new html content 改变元素的 inner HTML
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(attribute, value) 改变 HTML 元素的属性值
element.style.property = new style 改变 HTML 元素的样式
添加以及删除元素节点
document.createElement(element) 创建 HTML 元素
document.removeChild(element) 删除 HTML 元素
document.appendChild(element) 添加 HTML 元素
document.replaceChild(element) 替换 HTML 元素
document.write(text) 写入 HTML 输出流
添加事件处理程序
document.getElementById(id).onclick = function(){ 需要执行的代码块 }
查找 HTML 对象
document.anchors 返回拥有 name 属性的所有 元素。
document.applets 返回所有 元素（HTML5 不建议使用）
document.baseURI 返回文档的绝对基准 URI
document.body 返回 元素
document.cookie 返回文档的 cookie
document.doctype 返回文档的 doctype
document.documentElement 返回 元素
document.documentMode 返回浏览器使用的模式
document.documentURI 返回文档的 URI
document.domain 返回文档服务器的域名
document.embeds 返回所有 元素
document.forms 返回所有 元素
document.head 返回 元素
document.images 返回所有 元素
document.implementation 返回 DOM 实现
document.inputEncoding 返回文档的编码（字符集）
如需修改 HTML 元素的内容，请使用此语法：
document.getElementById(id).innerHTML = new text
如需修改 HTML 属性的值，请使用如下语法：
document.getElementById(id).attribute = new value
本例会在用户点击按钮时，更改 id=“id1” 的 HTML 元素的样式：
我的标题 1
使用 HTML DOM 分配事件
HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：
实例:为 button 元素指定 onclick 事件：
JS常用事件
PC端（电脑网页）
load 页面或图像被完成加载
click 鼠标点击某个对象
mousedown 鼠标按键被按下
mouseup 鼠标按键被松开
mouseout 鼠标从某元素移开
mouseover 鼠标被移到某元素之上
abort 图像加载被中断
blur 元素失去焦点
change 用户改变域的内容
dblclick 鼠标双击某个对象
error 当加载文档或图像时发生某个错误
focus 元素获得焦点
keydown 键盘的键被按下
keypress 键盘的键被按下或按住
keyup 键盘的键被松开
mousemove 鼠标被移动
reset 重置按钮被点击
resize 窗口或框架被调整尺寸
select 文本被选定
scroll 元素滚动条在滚动时触发。
submit 提交按钮被点击
unload 用户退出页面
移动端（手机网页）
touchstart : 触摸开始（手指放在触摸屏上）
touchmove : 拖动（手指在触摸屏上移动）
touchend : 触摸结束（手指从触摸屏上移开）
touchenter ： 移动的手指进入一个dom元素。
touchleave ： 移动的手指离开一个dom元素。
touchcancel： 是在拖动中断时候触发
tap: 手指碰一下屏幕会触发
longTap: 手指长按屏幕会触发
singleTap: 手指碰一下屏幕会触发
doubleTap: 手指双击屏幕会触发
swipe： 手指在屏幕上滑动时会触发
swipeLeft： 手指在屏幕上向左滑动时会触发
swipeRight： 手指在屏幕上向右滑动时会触发
swipeUp： 手指在屏幕上向上滑动时会触发
swipeDown： 手指在屏幕上向下滑动时会触发
事件监听
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
您能够向一个元素添加多个事件处理程序。
您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。
您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。使用true或者flase，默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。
在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的
在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
DOM 节点：
**节点关系**
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
整个文档是文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
所有注释是注释节点
有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点，还可以修改和删除所有节点。
**节点树中的节点彼此之间有一定的等级关系。**
术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
在节点树中，顶端节点被称为根（根节点）。
每个节点都有父节点，除了根（根节点没有父节点）。
节点能够拥有一定数量的子
同胞（兄弟或姐妹）指的是拥有相同父的节点。有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点，还可以修改和删除所有节点。
One：
Two：
Three：
nodeName 属性
nodeName 属性规定节点的名称。
nodeName 是只读的
元素节点的 nodeName 等同于标签名
属性节点的 nodeName 是属性名称
文本节点的 nodeName 总是 #text
文档节点的 nodeName 总是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本文本
属性节点的 nodeValue 是属性值
appendChild() 方法，追加新元素作为父的最后一个子。
var div=document.createElement(“div”); //新建一个div元素节点
var node = document.createTextNode(“这是新文本。”); //给新增的div元素添加文本内容
document.body.appendChild(node); //把div元素节点添加到body元素节点中成为其子节点，但是放在body的现有子节点的最后
newNode：将要插入的节点
referenceNode：被参照的节点（即要插在该节点之前）
insertedNode：插入后的节点
parentNode：父节点
代码示例：
etElementsByTagName() 方法返回 HTMLCollection 对象。
下面的代码选取文档中的所有
元素：
实例：var x = document.getElementsByTagName(“p”);
该集合中的元素可通过索引号进行访问。可以通过for循环进行遍历，x具有length属性，索引从 0 开始。
如需访问第二个
元素，您可以这样写：
y = x[1];
HTML DOM NodeList 对象
NodeList 对象是从文档中提取的节点列表（集合）。
NodeList 对象与 HTMLCollection 对象几乎相同。
如使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
所有浏览器都会为 childNodes 属性返回 NodeList 对象。
大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。
下面的代码选取文档中的所有
节点：
实例
var myNodeList = document.querySelectorAll(“p”);
HTMLCollection 与 NodeList 的区别
HTMLCollection是 HTML 元素的集合。
NodeList 是文档节点的集合。
NodeList 和 HTML 集合几乎完全相同。
HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
它们都有定义列表（集合）中项目数的 length 属性。
它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。
访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
只有 NodeList 对象能包含属性节点和文本节点。
节点列表不是数组！
节点数组看起来像数组，但并不是。
您能够遍历节点列表并像数组那样引用其节点。
不过，您无法对节点列表使用数组方法，比如 valueOf()、push()、pop() 或 join()。