DOM树是Web页面的模型

当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。

文档节点：

在树的顶端是文档节点，它呈现整个页面。

元素节点：

需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。

属性节点：

属性节点不是所在元素的子节点，它们是这个元素的一部分。当访问一个元素时，有特定的方法和属性用来读取或修改这个元素的属性。

文本节点：

当访问元素节点，可以访问元素内部的文本。文本节点没有子节点。

使用DOM树

访问并更新DOM树需要两个步骤：

1.定位到与需要操作的元素所对应的节点。
2.使用它的文本内容、子元素或属性。

选择单个元素节点：

getElementById()

使用元素的id属性（在页面中唯一），支持最低浏览器版本：IE5.5、Opera7.所有版本Chrome，Firefox和Safari。
它是访问元素速度最快，最有效的方法。

querySelector()

使用CSS选择器，返回第一个匹配的元素，它使用起来很灵活，因为参数是CSS选择器，它可以精确定位到更多类型的元素，支持最低浏览器版本：IE8、Opera10，Chrome4，Firefox3.5和Safari4。

也可以通过在DOM树中从一个元素遍历到另一个元素的方式来选择单独的元素。

选择多个元素

getElementByClassName()

选择所有在class属性中使用了特定值的元素。

getElementsByTagName()

选择所有使用了指定标记的元素。

querySelectorAll()

使用CSS选择器来选择所有匹配的元素。

在元素节点之间遍历

parentNode

选择当前元素节点的父节点（只返回一个元素），这是属性，而不是方法。

previousSibling/nextSibling

选择DOM树种的前一个或后一个兄弟节点。

firstChild/lastChild

返回当前元素的第一个或最后一个子节点。

这些属性是只读的，它们只能用来选择一个新节点，而不能改变其父节点，兄弟节点或子节点。

访问/更新文本节点

nodeValue

这个属性允许访问或修改文本节点中的内容，文本节点不包含任何子元素中的文本。

操作HTML内容

innerHTML

这个属性可以访问子元素和文本内容

textContent

这个属性仅访问文本内容。

createElement(),createTextNode(),appendChild()/removeChild()

这些方法用来创建新的节点（前两个方法），将节点添加到树中或从树中移除节点。

访问或更新属性值

className/id

可以使用它们来获取或更新class和id属性。

hasAttribute(),getAttribute(),setAttribute(),removeAttribute()

第一个用来检查属性是否存在；第二个用来获取属性值；第三个用来更新属性值；第四个用来移出属性。

缓存DOM查询

用来在DOM树种查找元素的方法称为DOM查询。当需要多次操作同一个元素时，应该使用一个变量来保存这个查询的结果。用变量存储，并不是存储元素，存储的是DOM树中这个元素的引用。

访问元素

DOM查询可能返回一个元素，也可能返回一个NodeList（节点的集合）

元素节点组

如果一个方法有可能返回多个节点，那么它将永远返回一个NodeList，可以使用索引编号检索。

最快路径

一条能找到你所需要的元素所经过节点数量最少的路径。

NodeList：返回多个元素的DOM查询

NodeList是一组元素节点的集合。每个节点都有索引编号（从0开始，像数组那样）
length属性表示在NodeList中一共有多少项。item（）方法会返回NodeList中特定的节点，需要在小括号中指定所需的索引编号。

动态和静态NodeList

有时候需要多次使用一组相同的元素集合，所以可以将NodeList保存在一个变量中，然后重用。
在动态NodeList中，当脚本更新页面之后，NodeList也会同样进行更新。以“getElementsBy”开头的方法会返回动态NodeList。它们通常也比获取静态NodeList更快。一些新的方法，比如以“querySelector”开头的方法，会返回静态NodeList。当进行查询时，它们会反映当时的文档。如果脚本更新页面的内容，NodeList不会被更新，不会反映脚本所做的这些修改。

空白节点

遍历DOM可能会遇到一些麻烦，因为有些浏览器会在元素之间添加一个文本节点，不管它们之间是不是真的有空白。

如何获取/更新元素内容

需要针对元素所包含内容的不同来使用不同的方法。

元素只包含文本，不包含其他元素：导航到文本节点。

nodeValue 访问节点文字。

一个元素同时拥有文本节点和其他子节点：使用包含元素。

innerHTML 获取/设置文本和标签
testContent 仅获取/设置文本
innerText 仅获取/设置文本。

当使用这些属性更新元素内容时，新的内容会覆盖这个元素原有的整个内容（包括其中的文本和标签）。

使用nodeValue属性获取和更新文本节点

使用nodeValue属性时，必须在文本节点上操作，而不是包含文本的元素节点上操作。

获取了第二个列表项文字内容，然后用String的replace方法替换，最后使用nodeValue属性更新。

使用textContent（和innerText）获取和更新文本

使用textContent属性可以获取或更新包含元素（及其子元素）中的文本。

innerText

应该避免使用它，
because 支持情况： Firefox不支持它，因为它不属于任何标准。
遵从CSS：它不会返回任何被CSS隐藏的内容。
性能：在获取文本内容时的速度要比textContent更慢。

添加或移除HTML内容

有两种非常不同的方法来添加和移除DOM树中的内容：innerHTML属性以及DOM操作。

innerHTML：

方法：innerHTML属性可以被用于任何元素节点。既可以用来获取内容，也可以用来修改内容。需要更新元素时，新的内容需要以字符串的形式提供，它可以包含后代的标签。
添加内容：1.把新的内容（包括标签）保存在一个字符串变量中。2.选中需要替换内容的元素。3.使用新的字符串来设置该元素的innerHTML属性。

DOM操作

DOM操作适合DOM树中的独立节点，而innerHTML更适合用来更新整个片段。比innerHTML安全一些，不过它需要更多的代码，速度也会更慢。
方法：允许创建元素和文本节点，然后将其附加到DOM树中，或将其从DOM树中移除。
添加内容：需要添加内容时，可以使用一个DOM方法来创建新的内容，每次创建一个节点，并将其保存到变量中。然后使用另一个DOM方法将其添加到DOM树中的适当位置。
移除内容：可以使用一个方法将一个元素（包括它的所有内容以及可能存在的子节点）从DOM树中移除。

技术比较：更新HTML内容

document.write（）

doucument对象的write（）方法可以很简单地向页面的源代码中添加内容。不过不推荐使用。
优点：可以快速，简单地让初学者理解如何向页面中添加内容。
缺点：只在页面初始化加载时有效。
如果在页面加载完之后使用该方法就会：整个页面都被覆盖，不是向页面中添加内容，创建一个新的页面，在严格验证的XHTML中可能会遇到问题。

element.innerHTML

优点：和DOM操作方法相比，可以使用更少的代码添加大量的新标签。
向页面中添加大量新元素时，速度比DOM操作更快。
当需要移除元素中的所有内容时，它更简单（直接设置一个空字符串）。
缺点：不应该用它来添加来自于用户输入的内容，会带来XSS外来网站攻击。
在添加一个很大的DOM片段时，这个方法很难独立区分出每一个元素。

DOM操作

DOM操作提供了一组方法和属性，用来访问，创建以及更新元素和文本节点。
优点：如果DOM片段中拥有大量兄弟节点，处理其中一个元素节点时，用这种方法更合适。
不会影响事件处理程序。
可以轻易地使用脚本来逐步添加元素。
缺点：速度慢
代码多