此篇文章讲解目录：

• DOM节点层次

• Node类型

• Document类型

• Element类型

DOM节点层次

DOM是属性的结构，如下图：

DOM的具体结构如下：

Node类型

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

可以输出看下Node上面的属性和方法；

Node的属性

• nodeType 节点类型

• nodeName 节点名称

• nodeValue 节点值

• childNodes 获取所有的子节点

• children 获取所有的元素子节点

• firstChild 获取第一个子节点（不一定是元素节点）

• lastChild 获取最后一个子节点

• nextSibling 获取下一个弟弟节点（不一定是元素节点）

• previousSibling 获取上一个哥哥节点

• parentNode 获取父亲节点

Node的方法

• appendChild 将节点添加到指定容器的最后面

• insertBefore 将新的节点添加到指定容器中某一个节点的前面

• replaceChild 把原有的元素进行替换

• removeChild 删除元素

• cloneNode 复制原有的节点，如果传递的值是true，代表将子子孙孙的后代元素一起赋值，false代表只复制当前元素本身

• hasChildNodes 返回一个布尔值,表明当前节点是否包含有子节点

1. Document类型

1. 查找元素

• getElementById：在整个文档中，通过元素的ID获取这个元素的对象，如果页面中没有这个ID，则获取的内容为null；

• getElementsByClassName：在整个文档中，通过元素class样式类的值来获取一组元素，IE678不兼容

• getElementsByName：在整个文档中，通过元素的name值来获取一组元素（NodeList集合），在IE浏览器中，此方法只对表单元素起作用；

• getElementsByTagName：在整个文档中，通过元素的标签名来获取一组元素(HTMLcollection集合)，获取的是一个类数组，获取的个数可以通过length获取，获取集合的某一个元素，通过对象的索引即可查找；

• querySelector：在整个文档中，通过不同的选择器获取一个元素对象,IE678不兼容

• querySelectorAll：在整个文档中，通过不同的选择器获取一组元素对象集合，IE678不兼容；

1. 特殊集合

• ocument.anchors 包含文档中所有带name特性的元素；

• document.links 包含文档中所有带href特性的元素，

• document.forms 包含文档中所有带form的元素，与document.getElementsByName("form")相同

• document.imges 包含文档中所有带的元素，与document.getElementsByName("img")相同；

1. 文档写入

将输出流写入到网页中，有4个方法；

• write(string) 原样写入

• writeIn(string) 在字符串的末尾添加一个换行符(\n)；

• open()

• close()

open()和close()分别用于打开和关闭网页的输出流；如果是加载期间使用write()或者writeIn()方法，则不需要用到这两个方法；

1. 文档的子节点

• document.documentElement;//拿到这个标签；

• document.body//拿到body这个层的标签；

1. 文档信息

• document.title 设置文档的标题

• document.URL 获取或者设置完整的URL

• document.domain 获取或者设置域名

• document.referrer 取得来源页面的URL

1. Element类型

1. 特性

1. id 元素在文档中的唯一标识符

2. title 有关元素的附加说明信息，鼠标放上去会显示，（以前我以为只有a标签才有，其实是都有的）

3. lang 元素内容的语言代码，很少使用

4. dir 语言的方向，值为ltr或者rtl，很少使用（left-to-right和right-to-left）;rtl可以起到右对齐的效果；

5. className 与元素的class特性对应，是元素指定的CSS类，没有将这个属性命名为class，是因为class是ECMAscript的保留字

1. 方法

1. getAttribute()

这个属性要注意的是，如果想获取到属性，必须先取得这个属性所在的元素；然后再进行相关的Attribute操作；这个属性可以获得自定义属性，根据HTML5规范，自定义的特性应该加上data-前缀进行验证；

转给getAttribute的特性名，与实际的特性名相同，因此要想得到class特性值，应该传入class而不是calssName；

1. setAttribute()

接受两个参数，第一个参数是特性名，第二个参数是特性值；如果特性已经存在，setAttribute会以指定的值替换现有的值；如果没有的值会创建并且新增；

通过这个方法设置的特性名会被统一转换为小写的形式；"ID"会最终变成id，"CLASS"会被变为"class"；

1. removeAttribute()

彻底删除元素的特性，调用这个方法不仅清除特性的值，而且也会从元素中完全删除特性；（IE6不支持）

1. creatElement()

可以创建新元素，接受一个参数，就是要创建的元素，参数可以是标签名