Document Object Model
DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
一.对节点的增删改查
A.查
a.查看元素节点
- document代表整个文档
- document.getElementById()//元素id在Ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
- .getElementsByTagName()//标签名
取出的元素都放在类数组中 - getElementByName();//需注意，只有部分标签name可生效（表单，表单元素，img，iframe）
- .getElementsByClassName();//类名->ie8及以下的ie版本中没有，可以多个class一起
- .querySelector()//css选择器 在ie7及以下的版本中没有，且非实时操作，在用法上受局限，（不是通过自己选择的元素进行修改，是无法修改的）。
//html
<html>
<div>
<span>
<strong>123</strong>
</span>
</div>
</html>
//javascript
<script type = "text/javascript">
var strong = document.querySelector('div > span strong');
</script>
选出的是单独元素
- .querySelectorAll()//css选择器 在ie7及以下的版本中没有
选出的是数组
二.节点树
- 遍历节点树
- parentNode->父节点（最顶端的parentNode为#document）；
- childNodes -> 子节点们（所有的节点类型都要算进去）
例1
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var div = document.getElementByTagName('div')[0];
此时，div.childNodes为[text, comment, text, strong, text, span, text]
- firstChild -> 第一个子节点
- lastChild -> 最后一个子节点
- nextSibling -> 后一个兄弟节点
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var strong = document.getElementByTagName('strong')[0];
此时，strong.nextSibling为text
- previousSibling->前一个兄弟节点
- 基于元素节点树的遍历
- parentElement -> 返回当前元素的父元素节点（IE不兼容）
document非元素，所以并不是最顶端的父元素节点 - children-> 只返回当前元素的元素子节点
//html
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
//js
var div = document.getElementByTagName('div')[0];
此时，div.children为[strong, span]
- node.childElementCount === node.children.length当前元素节点的子元素节点个数（IE不兼容）
- firstElementChild->返回的是第一个元素节点（IE不兼容）
- lastElementChild->返回的是最后一个元素节点（IE不兼容）
- nextElementSibling/previousElementSibling->返回后一个/前一个兄弟元素节点（IE不兼容）
三.节点的类型
- 元素节点----1
- 属性节点----2
- 文本节点----3
- 注释节点----8
- document----9
- DocumentFragment----11
- 获取节点类型 nodeType
四.节点的四个属性
- nodeName
元素的标签名，以大写形式表示，只读 - nodeValue
Text节点或Comment节点的文本内容，可读写 - nodeType
该节点的类型，只读
根据上方节点类型返回数字而判断
document.nodeType;//返回9
<div>
123
<!--This is comment -->
<strong></strong>
<span></span>
</div>
div.childNodes[1].nodeType;//注释节点返回8
- attributes
Elements节点的属性集合
//html
<div id = "only" class = "demo"></div>
//js
var div = document.getElementByTagName('div')[0];
上例中
div.attributes;
->NameNodeMap{0:id, 1:class, length:2}//attributes将div节点中的属性，以类数组的形式存储
div.attributes[0];
->id = "only"
div.attributes[0].nodeType;
->2//属性节点返回值为2
五.节点的一个方法 Node.hasChildNodes();
是否有子节点，返回true或false，（包含非元素节点）
