js中Dom的基本操作

什么是Dom
1.dom的英文全称为Document Object Model(文档对象模型)
2.dom定义了表示和修改文档所需要的各种方法，简单的来说dom的功能是用来操作html以及xml的，也有人称Dom是html和xml的标准编程接口。另外，dom不能改变css样式，但是可以通过改变行间样式的方法间接的改变css的样式

如何通过dom方法找html中的标签
1.通过标签名：document.getElementsByTagName(‘div’)即选中所有的div
如果想选中第一个div，写成document.getElementsByTagName（‘div’)[0];
2.div.style选出来代表行间样式，选出来的就是dom对象
3.js不能写-，只能用小驼峰的方式来写，例如background-color写成backgroundColor

Dom的一些基本的操作
对节点的增删改查
1.查 查看元素节点
document代表整个文档（如果给html再套上一个标签就是document）
（1）document.getElementById() 通过id表示选择这个元素，在实际的编程过程中很少使用id来选择
（2）document.getElementsByTagName() 通过标签名来选择，比较常用的一种方法

<div>123</div>
<script type="text/javascript">
document.getElementsByTagName('div')[0];
</script>

(3)document.getElementByClassName() 通过类名来选择 缺点：在ie8及其以下的版本中没用
（4）.querySelector() // css 选择器，只能选一个，在 ie7 和 ie7 以下的版本中没有
.querySelectorAll() // css 选择器，全选，选一组，在 ie7 和 ie7 以下的版本中没有
.querySelectorAll()和.querySelector()选出来的元素不是实时的（是静态的），所以一般
不用，其他的再怎么修改，跟原来的没有关系
id 选择器不能太依赖，一般当顶级框架存在，在 css 中一般用 class 选择器query 是一个词条

Dom基本操作-----遍历节点树
parentNode：父节点（最顶端的parentNode是#document）
childNode:子节点们（直接的子节点）节点包括文本节点，属性节点等等
firstChild：第一个子节点
lastChild：最后一个子节点
nextSibling:下一个兄弟节点
previousSibling:前一个兄弟节点

节点的类型
后面的数字是调用nodeType返回的数字
元素节点—1
属性节点—2
文本节点----3
注释节点----8
document----9
documnetFragment—11

基本元素节点树的遍历（不含文本节点）
（1）parentElement 返回当前元素的父元素节点
（2）children 只返回当前元素的元素子节点
（3）node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE 不兼容)——基本不用，因为与 length 相等
（4） firstElementChild -> 返回的是第一个元素节点(IE 不兼容)
（5）lastElementChild -> 返回的是最后一个元素节点(IE 不兼容)
（6）nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点（IE 不兼容)

每个节点的四个基本属性
1.nodeName 元素的标签名
2.nodeValue text文本节点或者comment注释节点的文本内容，可读写
3.nodeType 返回节点类型
4.attributes 节点的属性集合
节点的一个方法 Node.hasChildNodes();——他有没有子节点，返回值是 true 或 false