js的DOM

什么是DOM
1.DOM–> Document Object Model

2…DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
DOM的基本操作

对DOM 进行查看：
查看元素结点
1.document 代表整个文档

2.document.getElementById();–>查看元素id,在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素

3.document.getElementsByTagName() --> 标签名

4.document.getElementByName();–>需注意，只有部分标签name可生效（表单，表单元素，img，iframe）

5.document.getElementsByClassName() -->类名 ie8和ie8以下的ie版本中没有，可以多个class一起

6.document.querySelector() --> css选择器 在ie7和ie7以下的版本中没有

7.document.querySelectorAll() --> css选择器 在ie7和ie7以下的版本中没有

遍历节点树：
parentNode --> 父节点 (最顶端的parentNode为#document);
childNodes --> 子节点们
firstChild --> 第一个子节点
lastChild --> 最后一个子节点
nextSibling–>后一个兄弟元素
previousSibling–>前一个兄弟元素
举个例子：
在html

<div>
		123
		<!-- this is conment -->
		<p></p>
		<span></span><strong></strong>
	</div>

在sscript

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];

其中div的节子点们一共有8个，因为文字和注释以及每个节子点之间都有一些缝隙空间，这些也属于div的节子点们。

基于元素节点树的遍历
parentElement --> 返回当前元素的父元素节点 (IE不兼容)

children --> 只返回当前元素的元素子节点

node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE不兼容)

firstElementChild --> 返回的是第一个元素节点(IE不兼容)

lastElementChild --> 返回的是最后一个元素节点(IE不兼容)

nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE不兼容)

除了children这个属属性在IE中兼容，其它都不兼容

举个例子：

<

div>
		123
		<!-- this is conment -->
		<p></p>
		<span></span><strong></strong>
	</div>

在sscript

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];

元素节点不包括text文本 comment注释和缝隙空间

节点的四个属性
nodeName：元素的标签名，以大写形式表示,只读
nodeValue：Text节点或Comment节点的文本内容,可读写
nodeType：该节点的类型，只读
attributesElement： 节点的属性集合
节点的一个方法 Node.hasChildNodes();

节点的类型
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType