DOM继承树及基本操作

一、继承树

继承树大致如下：

常用的方法和规则

1. getElementById()定义在Document.prototype上；
2. getElementsByName() 定义在HTMLDocument.prototype上；
3. getElementsByTagName(),getElementsByClassName(),querySelector(),querySelectorAll() 定义在Document.prototype和Element.prototype上；
4. HTMLDocument.prototype定义了两个属性：body和head，分别代表了body和head标签；
5. Document.prototype定义了一个属性 ：documentElement属性，指代HTML元素。

下面我们来说一说document、HTMLDocument、Document这三者的关系：
实际上Document是一个构造函数，document是它实例化出来的，document的proto是HTMLDocument，而HTMLDocument的原型才是Document，也就是说：

HTMLDocument.prototype = {
		 	__proto__ : Document.prototype
		 }

二、DOM基本操作

1. document.getElementById()：IE8以下id名字不区分大小写，直接可以和name同用；
2. document.getElementsByTagName()：低版本支持；
3. document.getElementsByClassName()：IE8及以下不兼容；
4. document.getElementsByName()：老版本的浏览器才好使；
5. document.querySelector()、document.querySelectorAll()：IE7及以下不兼容。

三、节点

节点分为普通的节点和元素节点。

普通节点

普通节点主要有文本节点，属性节点，元素节点，注释节点，document，文档节点碎片。

1. 父节点 parentNode
2. 子节点们 childNodes
3. 第一个子节点 firstChild
4. 最后一个子节点 lastChild
5. 上一个兄弟节点 previousSibling
6. 下一个兄弟节点 nextSibling

元素节点

1. 父元素节点 parentElement
2. 子元素节点们 children
3. 第一个子元素节点 firstElementChild
4. 最后一个子元素节点 lastElementChild
5. 上一个兄弟元素节点 previousElementSibling
6. 下一个兄弟元素节点 nextElementSibling

节点的属性

1. 节点的名字（nodeName）只读，不能修改的；
2. 节点的内容（nodeValue）只能针对文本节点和注释节点，可读可改的属性；
3. 节点的类型（nodeType）只读的属性；
4. attributes。