JS学习笔记（第10章）（DOM之节点层次）
节点层次
DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都有自己的特点、数据和方法，也与其他的节点存在某种关系，构成了层次。
<html>元素为文档元素。是文档的最外层元素。每一段标记都可以通过一个节点来表示。HTML元素通过元素点表示，特性通过特性点来表示。文档类型通过文档类型节点来表示。注释通过注释节点来表示。共有12种节点类型，这些类型都继承自一个基类型。
1、Node类型
每个节点都有一个nodeType属性。用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。
每个节点都有一个childNodes属性，其中保存着NodeList对象。可以通过方括号，也可以使用item()来访问Nodelist中的节点。
每个节点都有一个parentNode属性，指向父节点。 都有previousSibling 和nextSibling
父节点的firstChild和lastChild分别指向其childNodes的第一个和最后一个节点。
因为节点的关系指针都是只读的，所以DOM提供了操作节点的方法。
- appendChild():向childNodes列表的末尾添加一个节点。返回新增的这个节点。如果已经有了这个节点， 那么就将该节点从原来的位置转移到最后的位置。
- insertBefore():将节点插入到节点列表指定的位置。接收两个参数，被插入的节点和作为参照的节点， 被插入的节点将会变成参照节点的前一个同胞节点。
- replaceChild():替换节点。接收两个参数，要插入的节点和要替换的节点。 返回要替换的节点。
- removeChild():移除节点。 返回值为那个被移除的节点。
- cloneNode():复制节点。参数为 true的时候执行深复制，为false则执行浅复制。这个方法只复制特性，不会复制节点中的js属性。
2、Document类型
js通过document类型表示文档。document对象是HTMLDocument的一个实例。Document节点有以下的特性：
nodeType为9，nodeName为‘#document’document.documentElement指向html元素，document.body指向body元素。
- document.title:获取或修改文档的标题。
- document.URL:获取完成的URL
- document.domain:获取域名
- document.referrer:获取来源页面的URL
- document.getElementById():
- document.getElementByTageName:获取到HTMLCollection对象，这个对象有一个方法namedItem()，可以通过元素的name特性取得集合中的项。
- document.getElementByName():获得所有有name特性的元素。
- 特殊集合：
- document.forms:取得文档中所有form元素。
- document.images:取得所有的img元素。
- document.links:取得所有带href特性的a元素
- document.write():页面写入内容
3、Element类型
element类型为xml或者html的元素。提供了对元素的标签名，子节点和特性的访问。
特性：nodeType为1， nodeName的值为元素的标签名。 parentNode可能为Document或者Element
- 标准属性：id、title 、lang（元素内容的语言代码，很少使用）、dir（值为ltr或rtl）、className
- 取得特性： getAttribute()有两类特殊的特性，通过getAttribute返回的值并不相同。第一个就是style，返回的是style的字符串。 第二个就是onlick这样的事件处理程序，返回的也是相应代码的字符串。基于这些，一般只有在取得自定义特性值的时候，才使用getAttribute的方法。
- setAttribute():参数为 要设置的特性名 和值
- removeAttribute():删除元素的特性。
- attributes属性
- 创建元素
- document.createElement()可以创建新元素，参数为要创建元素的标签名。
- 元素的子节点
- 元素的childNodes属性中包含了它的所有的子节点
4、Text类型
文本节点由Text类型表示，包含的可以是纯文本内容。
特性： nodeType为3， nodeName为‘#text’， nodeValue为节点所包含的文本。 不支持子节点
- 创建文本节点
- document.createTextNode()创建新文本节点。参数为要插入的文本。
- 规范化文本节点
- normalize()可以将一个包含多个文本节点的父元素的所有文本节点合并成一个节点。
- splitText():按照指定的位置分割ndoeValue
5、Comment类型
- 注释类型，特性为:nodeType为8，nodeName为‘#comment’，nodeValue为注释内容
6、DocumentFragment类型
- 文档片段在文档中是没有对应的标记的。不过可以包含和控制节点。
- document.createDocumentFragment()
7、Attr类型
- 元素的特性就是Attr类型来表示。特征为： nodeType为2，nodeName为特性的名称，nodeValue为特性的值