JavaScript读书学习笔记(四)——DOM

DOM（文档对象模型）是针对HTML和XML的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除、修改页面的某一部分。

4.1 节点层次

文档节点时每个文档的根节点。

4.1.1 Node类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。JavaScript中的所有类型都继承自Node类型，因此所有类型都共享这相同的基本属性和方法。

1.nodeName和nodeValue属性

对于元素节点，nodeName的值始终为元素名，nodeValue的值始终为null。

2.节点关系

每个节点都有一个childNode属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，保存着一组有序的节点，可以通过位置来访问这些节点。注意，虽然可以通过方括号语法来访问NodeList值，并且这个对象也有length属性，但它不是Array的实例。NodeList实际上是基于DOM结构动态执行查询的结果，因此DOM结构的变化能够自动反映在NodeList中。

3.操作节点

因为关系指针是只读的，最常用的方法是appendChild，用与向childNodes列表的末尾添加一个节点。如果要把节点放在childNodes的某个特殊位置，则可使用insertBefore方法。replaceChild方法接受两个参数：要插入的节点和要替换的节点。

4.其他方法

cloneNode()方法创建调用这个方法的节点的一个副本。还有一个normalize()。

4.1.2 Document类型

JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。document对象是window对象的一个属性，因此可以作为全局对象来访问。

1.文档的子节点

DOM标准规定Document节点的子节点可以是DocumentType, Element, ProcessingInstruction或Comment，但还有两个内置的访问其子节点的快捷方式。

2.文档信息

作为HTMLDocument的一个实例，document对象还有一些Document对象没有的属性，这些属性提供了document一些表现网页的信息。

3.查找元素

最常见的DOM应用，就是取得特定的某个或某组元素的引用，然后再执行一些操作。Document为此提供了两个方法：getElementById()和getElementsByTagName()。第三个方法，只有HTMLDocument才有的方法，是getElementsByName()。

4.特殊元素

除了属性和方法，document对象还有一些特殊的集合，这些集合都是HTMLCollection对象，为访问文档常用的部分提供了快捷方式。

5.DOM一致性检测

由于DOM级别包含多个级别，也包含多个部分，因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation属性就是为此提供相应信息和功能的对象，与浏览器对DOM的实现直接对应。

6.文档写入

document对象有将输入流写入网页中的能力，这个能力体现在下列4个方法中：write(), writeln(), open(), close()。

4.1.3 Element类型

Element类型用于表现XML和HTML元素，提供了对元素标签名、子节点和特性的访问。

1.HTML元素

所以HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型来表示。HTMLElement类型直接继承自Element属性并添加了一些属性。

2.取得特性

每个元素有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。操作DOM方法主要有3个，分别是getAttribute，setAttribute，removeAttribute。这三个方法可以针对任何特性使用，包括那些以HTMLElement类型属性的形式定义的特性。

3.设置特性

与getAttribute对应的方法是setAttribute。

4.attributes属性

Element类型是使用attributes属性唯一一个DOM节点类型。attributes属性包含一个NameNodeMap，与NodeList相似，也是一个动态集合。元素的每一个特性都由一个Attr节点表示，每个节点都保存在NameNodeMap对象中。

5.创建元素

使用document.createElement()方法可以创建新元素。这个方法只能接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，而在XML（XHTML）中，则是区分大小写的。

6.元素的子节点

元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有的子节点，这些子节点有可能是元素、文本节点、注释或处理指令。

4.1.4 Text类型

文本节点由Text类型表示，包含的是可以照字面意思解释的纯文本内容。纯文本可以包含转义后的HTML字符，但不能包含HTML代码。可以通过nodeValues属性或data属性访问Text节点中包含的文本，这两个属性中包含的值相同。对nodeValue的修改也会通过data反映出来，反之亦然。

1.创建文本节点

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点中的文本。与设置已有文本节点中的值一样，作为参数的文本呀将按照HTML或XML的格式进行编码。

2.规范化文本节点

DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。DOM文档中出现相邻文本节点的情况不少，于是就有了将相邻文本节点很的方法。这个方法是由Node类型定义的，叫normalize()。如果在一个保护两个或多个文本节点的元素上调用normalize()方法，则会将所有文本节点很成一个节点，结果节点的nodeValue等于将合并的每个文本节点的nodeValue值拼接起来的值。

3.分割文本节点

Text类型提供了一个作用与normalize()相反的方法，splitText()。这个方法会将一个文本节点分成两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置之前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode相同。

4.1.5 Comment类型

注释在DOM中是通过Comment类型来表示的。

Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与Text类型相似，也可以通过nodeValue或data属性访问注释内容。

4.1.6 CDATASection类型

CDATASection类型只针对基于XML的文档，表示的是CDATA区域。与Comment类型，CDATASection类型继承自Text类型。

4.1.7 DocumentType类型

不常用。

4.1.8 DocumentFragment类型

在所有的节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。

4.1.9 Attr类型

元素的特性在DOM中以Attr类型表示。在所有浏览器中，都可以访问Attr类型的构造函数和原型。特性就是存在于元素的attributes属性中的节点。

4.2 DOM操作技术

4.2.1 动态脚本

使用<srcipt>元素可以向页面中插入JavaScript代码，一种方式是通过其src特性包含外部文件，另一种方式就是用这个元素本身来包含代码。而动态脚本，指的是页面加载时不存在，但将来某一时刻通过修改DOM动态添加的脚本。跟操作HTML元素一样，创建动态脚本也有两种方式：插入外部文件和直接插入JavaScript代码。

4.2.2 动态样式

能够把CSS样式包含到HTML页面中的元素有两个。<link>元素用于包含来着外部的元素，<style>元素用于指定嵌入的样式。与动态脚本类似，动态样式是在页面加载完成后动态添加到页面中的。

4.2.3 操作表格

<table>

4.2.4 使用NodeList

NodeList, NameNodeMap, HTMLCollection这三个集合都是动态的，每当文档结构发生变化时，他们都会得到更新。因此，它们始终保持着最新的、最准确的信息。从本质上，所有NodeList对象都是在访问DOM文档实时允许的查询。