DOM操作初探（基础篇）

什么是DOM：
1、DOM -> Document Object Model 文档对象模型
2、DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也要人称DOM是对HTML以及XML的标准变成接口
3、DOM只能操作Html和XML不能操作css样式表，可以通过Html间接的修改行间样式

DOM基本操作：
1、对节点的增删改查
查看元素节点：

• document代表整个文档
• document.getElementById() 元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配name属性的元素
• document.getElementsByTagName() 标签名
• document.getElementsByName() 需注意，只有部分标签name可生效(表单，表单元素，img，iframe)
• document.getElementsByClassName() 类名->ie8和ie8以下的ie版本中没有，可以多个class一起
• querySelector() css选择器 在ie7和ie7以下的版本中没有 选出来的不是实时的，使用上受局限
• querySelectorAll() css选择器 在ie7和ie7以下的版本中没有

2、遍历节点数

• parentNode -> 父节点 (最顶端parentNode为#document)
• childNodes -> 子节点们 不同类型的节点
• firstChild -> 第一个子节点
• lastChild -> 最后一个子节点
• nextSibling -> 后一个兄弟节点 previousSibling -> 前一个兄弟节点

3、基于元素节点树的遍历

• parentElement -> 返回当前元素的父元素节点（IE不兼容）document不是元素节点，不包括document
• children -> 只返回当前元素的元素子节点
• node.childElementCount === node.children.length 当前元素节点的子元素节点个数（IE不兼容）
• firstElementChild -> 返回的是第一个元素节点（IE不兼容）
• lastElementChild -> 返回的是最后一个元素节点（IE不兼容）
• nextElementSibling/previousElementSibling -> 返回后一个/前一个兄弟元素节点（IE不兼容）

4、节点类型

• 元素节点 – 1
• 属性节点 – 2
• 文本节点 – 3 Text
• 注释节点 – 8 Comment
• document – 9
• DocumentFragment – 11 文档碎片节点

5、获取节点类型 nodeType
6、节点的四个属性：

• nodeName 元素的标签名，以大写的形式表示，只读取不能修改
• nodeValue Text节点或Comment节点的文本内容，可读写
• nodeType 该节点的类型，只读
• attributes 节点的属性集合

7、节点的一个方法

• Node.hasChildNodes()