《JS原理、方法与实践》- DOM核心
Node
在DOM中文档的结构是以节点来表示的，所有的元素（对象）都叫做节点。节点有很多类型，总的节点对象叫做Node，Node下面具体分为10个子类型，子类型中的CharacterData对象又进行细分。
HTML DOM Tree 实例
在DOM中，文档的所有组成部分都叫做Node(节点)，例如HTML文件中的html、body、图片、文字、各种标签、以及标签的属性等。
Node的不同类型节点是通过NodeType来区分的。NodeType是Node接口对象的属性，共有12个值：
Node的属性
Node接口是多个节点类型的父接口，起始定义所有节点通用的属性（包括方法属性），这些属性主要可以分为三大类：属性类、判断类和操作类。
浏览器会根据加载的HTML文件自动生成相应的DOM对象，这样就可以在JS中对其进行操作，而Node就是所有这些生成的DOM对象的总接口，换句话说，浏览器生成的所有DOM对象都将包含Node中的所有属性。
1.属性类属性
Node的属性类属性又可以分为两种类型，一种是可读写的，另一种是只读的。
可读写属性主要又三个：nodeValue、textContent和userData。其中，nodeValue表示节点的值，例如：Text节点的nodeValue就是节点本身的值。textContent表示节点所包含的文本内容，例如div节点中所有子节点的文本内容就是div的textContent。userData是我们可以自己在节点上设置的值，使用userData就相当于将节点看成一个普通对象，然后度iqi属性进行操作。对userData的操作是使用serUserData和getUserData两个方法进行的，但是，这两个方法大部分浏览器现在还不支持。
代码实例：
<body>
<div id="a">this is a text box.<div>inner box</div></div>
<script>
var div_a = document.getElementById("a");
console.log(div_a.firstChild.nodeValue); // this is a text box.
console.log(div_a.textContent); // this is a text box.inner box
div_a.setUserData("userData", {name: 'zzh', sex: 'male'});
console.log(JSON.stringify(div_a.getUserData("userData")));
</script>
</body>
测试结果
Node的只读属性主要包括以下几个：
- nodeType: 节点类型
- nodeName: 节点名称
- attributes: 节点包含的属性节点的集合
- parentNode: 节点的父节点
- childNodes: 节点的所有子节点集合
- firstChild: 节点的第一个子节点
- lastChild: 节点的最后一个子节点
- previousSibling: 节点的前一个节点
- nextSiblind： 节点的后一个节点
- ownerDocument： 节点所在的文档
2.判断类属性
- node.isEqualNode(arg): 判断两个节点是否相等，参数为Node类型
- node.isSameNode(other): 判断是否为同一个节点，参数为Node类型
- node.isSupported(feature, version): 判断是否支持某个特性
- node.hasChildNodes(): 判断是否包含子节点
- node.hasAttributes(): 判断是否包含属性
- node.compareDocumentPosition(otherNode): 判断两个节点的相互位置关系，参数为另一个节点
3.操作类属性
Node的操作类属性主要包括6个方法属性：
- node.appendChild(newChild)： 添加子节点
- node.cloneNode(deep): 克隆节点
- node.insertBefore(newChild, refChild): 在指定子节点前插入子节点
- node.removeChild(oldChild): 移除子节点
- node.replaceChild(newChild, oldChild):替换子节点
- node.normalize(): 规范化文档（主要是合并相邻Text节点）
Element
Element节点就是在文档中使用的标签，例如html、body、div等标签都是Element类型的节点。Element节点主要包含tagName、attribute、attributeNode属性和getElementsByTagName方法。
attribute表示节点的属性值，attributeNode表示属性节点本省，它们都有相应的查询，获取，设置和删除的方法：
- hasAttribute(name): 判断是否包含指定名称的节点属性
- getAttribute(name): 获取节点属性的值
- setAttribute(name,value): 设置节点属性的值
- removeAttribute(name): 删除指定名称的节点属性
- getAttributeNode(name): 按名称获取指定属性节点
- setAttributeNode(newAttr): 设置新属性节点
- removeAttributeNode(oldAttr): 删除属性节点
Attr
Attr节点是表示属性类型的节点，也就是我们常用的标签中的属性，一共包括以下6个属性：
- name: 属性名
- value： 属性值
- ownerElement: 属性所在的Element节点
- spcified: 属性是否被指定，如果显示设定了，则返回true, 如果使用的是默认值，则返回false
- isId： 是否为Id属性，这是DOM3中新增的属性，浏览器支持得并不友好，只有Safari可以返回正确得结果。
- schemaTypeInfo: 命名空间相关，主要用于XML
Text
Text节点是表示文本类型得节点，也就是我们平时直接使用得问题。它并不是直接继承得Node接口，而是继承自CharacterData接口，CharacterData接口继承自Node接口：
Character
Character接口一共包含7个属性：
- appendData(arg): 在尾部添加数据
- insertData(offset, arg): 在指定位置插入数据
- deleteData(offset, count): 删除指定位置得数据
- replaceData(offset, count, arg): 替换指定位置的数据
- substringData(offset, count): 截取指定位置的数据
Text
Text节点本身有一个wholeText属性和三个方法属性:
- wholeText: 表示于Text节点相邻的所有Text节点组成的文本
- replaceWholeText: // 不被支持
- isElementContentWitespace： // 不被支持
- splitText： 用于在指定位置将Text节点分为两个Text节点，参数为分割位置
Comment
Comment节点表示注释类型的节点，继承CharacterData，没有自己的属性
Document
Document节点并不是直接在Html文件中存在的节点，它代表整个文档，所有其他节点，都在它之下，它包含的属性：
- adoptNode(source): 将另外一个文档中的节点添加到当前文档
- importNode(importedNode, deep): 引入节点
- createAttribute(name): 创建属性节点
- createComent(data): 创建注释节点
- createDocumentFragment(): 创建DocumentFragment节点
- createElement(tagName): 创建Element节点
- createTextNode(data): 创建Text节点
- renameNode(node, namespanceURI, newName): 修改节点名称
- getElementById(id): 使用Id获取Element节点
- getElementByTagName(TagName)： 按照标签名获取所有节点
- doctype： 文档类型DocumentType
- documentElement: 获取Element根节点，例如：html
- inputEncoding: 编码方式
- implementation: 获取DOMImplementation
- strictErroChecking: 是否强强制进行错误检查，可读写
DocumentFragment
DocumentFragment节点表示Document片段节点，它是轻量级的Document，继承自Node，没有自己的属性。它的作用就是一个容器，当选哟插入多个节点时，为了避免频繁的操作DOM，可以先使用DocumentFragment，之后再插入到DOM中。
异常对象
辅助对象
- DOMImplementation：独立于文档的接口，检查是否支持指定版本的特性，获取指定版本，创建DocumentType，创建Document。
- NamedNodeMap：获取包含节点的数量，按名称获取指定节点，将指定节点添加到Map中，删除指定名称的节点，按序号获取节点。
- NodeList：与NamedNodeMap类似，不同之处在于NodeList包含的节点是有顺序的。
