JavaScript中DOM操作

一、DOM（Document Object Model文档对象模型）

　　可以将任何的HTML和xml文档描绘成一个由多层次节点构成的结构。

　　DOM规定：

　　　　-整个文档是一个文档节点

　　　　-每一个HTML标签都是元素节点

　　　　-HTML标签中的属性是属性节点（注意：DOM4中属性已经不属于节点，childNodes已经不包括属性节点）

　　　　-包含在HTML中的文字是文本节点（包括空格）

　　　　-注释内容是注释节点

二、元素节点操作

　　1、查找元素节点

　　　1.1)查找自身

- 　　id 找到 HTML 元素
- 　　通过标签名找到 HTML 元素
- 　　通过类名找到 HTML 元素

　　1.2）子节点

　　　获取所有子节点：

 　　　　-childNodes:包括文本节点
　　　　 -children：不包括文本节点
　　获取第一个节点：
　　　　 -firstChild：包括文本节点
　　　　 -firstElementChild：不包括文本节点
　　获取最后一个子节点同理

　　1.3）父节点　　　

　　　　相同点：两者输出结果相同
　　　　不同点：
  　　　　  parentNode：获取文档层次中的父节点
   　　　　 parentElement：获取对象层次中的父节点

　　1.4）兄弟节点

　　注意：childNodes与children；parentNode与parentElement中

　　　　parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持

　　2、增加节点

　　创建元素：为避免频繁刷新DOM，可以先创造代码片段，完成所有节点操作之后统一添加到DOM中
　　　　-createElement(nodeName)：创建一个新的节点，并将新节点返回.
　　　　　　参数：nodeName为必须参数，为标签名。会创建对应的节点
　　添加到节点树中
　　　　-父节点.appendChild(新节点)：在父节点的内部最后，插入一个新节点。注意参数是节点。
　　　　-父节点.insertBefore(新节点，目标节点)：在父节点中，将新节点插入到目标节点之前。
　　　　-源节点.cloneNode():克隆节点
　　　　　　*参数为空和false时浅克隆（不克隆子节点），参数为true，深克隆（克隆自身及其所有的子节点）
　3、删除、替换节点
　　　　-父节点.replaceChild(新节点，旧节点)：用新节点替换旧节点
　　　　-父节点.removeChild(子节点):移除指定的子节点

二、属性节点操作
　　属性就是对象身上所保存的数据，CSS样式就是这样的形式（键值对），所以操作属性节点其实就是对DOM元素的样式进行增删改查。
　　CSS样式有：行内样式(HTML标签中)、内联样式（页面中使用标签嵌入）、外部样式（引入的外部样式表）

　　1、点语法操作属性节点：可读可写
　　　　点语法可以获取的属性：行内样式、通过点语法动态添加的属性、
　　　　不可获取：外部样式、内联样式、行内自定义的样式