时间：2021-07-01 10:21:17 帮助过：4人阅读
My page first paragraph
second paragraph
final
我们来看看第二段
second paragraph
可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点，p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree).
Core DOM 和 HTML DOM
我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档，只不过更为规范些。因此作为DOM Level 1的一部分，Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档，仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。
构造器关系
访问DOM节点
当要验证表单或者更换图片之前，我们要知道怎么样访问元素(element.)。有很多方法获取元素。
Document节点
通过document我们可以访问当前的文档。我们可以通过firebugs（火狐插件），来查看document的属性和方法。
所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么
一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。
节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document.
节点也有值。对于文本节点，值就是文本。document的值为null
documentElement
XML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。
Child Nodes
为了确定是否包含子节点我们可以用如下方法
HTML有两个子节点。
也可以通过子节点访问父节点
我们把body的引用赋值变量
让我们看看body的结构
first paragraph
second paragraph
final
为什么子节点个数为9个呢。
首先是4个P还有一个注释一共4个。
4个节点包含了3个空白的节点。这就7个。
第8个在body和第一个p之间的空白节点。
第9个就是在注释与
可以查看它是否有属性
也可以查看attributes的个数
访问标签里的内容
让我们看看第一个标签p
你可以用textContent属性来访问。要注意的是，在IE浏览器中并不存在textContent，请用innerText来替换，结果都是一样的。
还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。
第一段没有html代码，所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签
另一种方法可以获取文本节点，然后再取nodeValue属性，代码如下
快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中，文本节点是比较讨厌的。如果文本改变了，有可能就影响脚本了。还有如果DOM树足够的深入，那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是
首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下
因为返回的是个集合，我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。
访问元素的属性，可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子
要注意的是，class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。
我们可以用如下方法访问页面所有元素
注意：在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了，但是返回的是所有节点(node)，而不仅仅是元素节点(element nodes)。
Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下
body 用来访问body元素的。
firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。
遍历DOM
通过以上的学习，我们可以写个函数，用来遍历DOM
修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。
非常容易更改这个元素的属性。我们可以更改innerHTML.
因为innerHTML可以写入html，所以我们来修改html。
em标签已经成为dom树的一部分了。我们可以测试一下
我们也可以通过nodeValue来改变值。
修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码
CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推
我们还可以修改其他的属性，无论这些属性是否被初始化。
创建节点
为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。
创建一个元素P，并把设置innerHTML属性
元素P建完成了，就可以随意修改添加属性了
接下来可以用appendChild把新的节点添加到DOM树中的。
使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。
另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。
首先获取要复制的元素。
先不用深度复制。
我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。
如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。
insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。
实例
意思就是新建一个文本节点，把它作为body元素的第一个节点。
删除节点
要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML
first paragraph
second paragraph
final
来看看下面代码，删除第二段
removed节点就是删除的节点。以后还可以用这删除的节点。
我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下
first paragraph
final
我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p
和removeChild返回一样。replaced就是移除的节点。现在结果为
first paragraph
second paragraph