Js节点操作

一、节点常用操作
document.createElement()用来生成网页元素节点，参数为元素的标签名
document.createTextNode()用来生成文本节点，参数为所要生成的文本节点的内容
node.appendChild()接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
node.hasChildNodes()返回一个布尔值，表示当前节点是否有子节点
node.removeChild()接受一个子节点作为参数，用于从当前节点移除该子节点
node.cloneNode()用于克隆一个选中的节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。注意: 不会克隆绑定到该元素上的事件
node.innerHTML返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）
node.innerText返回该元素包含的内容。该属性可读写
node.nextElementSibling返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null
node.previousElementSibling返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null
node.parentElement返回当前节点的父级Element节点
node.childNodes返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)
node.firstChild返回树中节点的第一个子节点，如果节点是无子节点，则返回null
node.lastChild返回该节点的最后一个子节点，如果该节点没有子节点则返回null

二、节点属性

属性操作的标准方法：
node.getAttribute()返回当前元素节点的指定属性。如果指定属性不存在，则返回null
node.setAttribute()为当前元素节点新增属性。如果同名属性已存在
node.hasAttribute()返回一个布尔值，表示当前元素节点是否包含指定属性
node.removeAttribute()从当前元素节点移除属性

三、css样式属性
节点对象.style.样式属性方式只能获取行内css样式，而写在 style 标签内的样式表，无法获取和修改。
getComputedStyle()接受一个节点对象，返回该节点对象最终样式信息的对象，所谓“最终样式信息”，指的是各种CSS规则叠加后的结果
注意： getComputedStyle() 是window对象下的方法，不是DOM对象

在具体使用的时候还有一些需要重点注意的细节：
1、名字需要改写，将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写：
比如background-color写成backgroundColor
2、属性值都是字符串，设置时必须包括单位：
比如，divStyle.width的值不能写为100，而要写为100px