HTML DOM 树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。常用的有三种方法来做这件事：
通过 id 找到 HTML 元素 var x=document.getElementById("intro");通过标签名找到 HTML 元素 var y=x.getElementsByTagName("p");通过类名找到 HTML 元素 var x=document.getElementsByClassName("intro");
可以组合查找，例如
查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
事件句柄(Event Handlers)
鼠标 / 键盘属性
addEventListener() 方法
语法：element.addEventListener(event, function, useCapture);
useCapture默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
第一个参数是事件的类型 (如 "click" 或 "mousedown").，
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
addEventListener浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
注意：IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
//跨浏览器解决办法var x = document.getElementById("myBtn");if (x.addEventListener) {// 所有主流浏览器，除了 IE 8 及更早版本x.addEventListener("click", myFunction);} else if (x.attachEvent) { // IE 8 及更早版本x.attachEvent("onclick", myFunction);}
创建新的 HTML 元素 (节点) - appendChild()
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var para = document.createElement("p");var node = document.createTextNode("这是一个新的段落。");para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);</script>
创建新的 HTML 元素 (节点) - insertBefore()
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var para = document.createElement("p");var node = document.createTextNode("这是一个新的段落。");para.appendChild(node);var element = document.getElementById("div1");var child = document.getElementById("p1");element.insertBefore(para, child);</script>
移除已存在的元素
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var parent = document.getElementById("div1");var child = document.getElementById("p1");parent.removeChild(child);</script>
替换 HTML 元素 - replaceChild()
<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另外一个段落。</p></div><script>var para = document.createElement("p");var node = document.createTextNode("这是一个新的段落。");para.appendChild(node);var parent = document.getElementById("div1");var child = document.getElementById("p1");parent.replaceChild(para, child);</script>
HTMLCollection 对象
getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。HTMLCollection 对象的 length 属性定义了集合中元素的数量。HTMLCollection 不是一个数组！HTMLCollection 看起来可能是一个数组，但其实不是。你可以像数组一样，使用索引来获取元素。HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。NodeList JavaScript HTML DOM 节点列表
NodeList对象是一个从文档中获取的节点列表 (集合) 。NodeList 对象类似 HTMLCollection 对象。一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。所有浏览器的childNodes属性返回的是 NodeList 对象。大部分浏览器的querySelectorAll()返回 NodeList 对象。NodeList 对象 length 属性定义了节点列表中元素的数量。HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。NodeList 是一个文档节点的集合。NodeList 与 HTMLCollection 有很多类似的地方。NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。NodeList 与 HTMLCollection 都有 length 属性。HTMLCollection 元素可以通过 name，id 或索引来获取。NodeList 只能通过索引来获取。只有 NodeList 对象有包含属性节点和文本节点。节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。
