DOM的节点访问以及操作

1.DOM的节点访问

DOM节点的关系如下图：

其中兄弟节点和子节点有个浏览器兼容的问题，以nextSibling为例，nextSibling在ie678才有效，而nextElementSibling在正常浏览器才有效。兼容的写法如下：

var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
//注意：必须先写正常浏览器，在写ie678.

previousSibling，firstChild和lastChild也有类似的操作。

比较常用的是父节点parentNode和所有子节点（childNodes和children）。

其中需要注意的是所有子节点的两种写法的区别：
1.childNodes是标准写法，但是他的所有子节点包括了元素节点，属性节点和文本节点，当我们需要元素节点的时候，需要使用nodeType == 1 来判断获取，有点麻烦。nodeType == 2：代表属性节点；nodeType == 3代表文本节点。需要注意的是，使用这种写法，会将换行也当做其字节点算入所有子节点中。
2.children是使用的比较多的写法，获取到的所有子节点仅包括元素节点，所以使用起来比较方便和实用，只需要注意的一点是在高端浏览器上，比如谷歌和火狐中，会将注释也当做子节点，这点是需要避免的。

2.DOM节点操作

DOM节点操作常用的有新建节点，插入节点，删除节点以及克隆节点

• 新建节点，creatElement（）：var li = document.creatElement("li"); 这句代码意思就是创建一个li元素节点

• 插入节点：appendChild();和insertBefore(插入的节点，参照节点)。插入节点的方法有两种，

  1.appendChild(),是将某节点插入到某节点子节点的后面，注意是插入到最后面：
  2.insertBefore(插入的节点，参照节点)是将节点添加到参照节点的前面

var f = document.getElementById("demo");
var div = document.createElement("div");
f.appendChild(div);//插入到f节点里面最后面一个
var p = document.createElement("p");
f.insertBefore(p,div);//在div节点前插入p节点

• 删除节点：removeChild（）；字面意义可以知道是移除某元素的子节点。此处的移除是指彻底的移除，删除，而不是隐藏。

• 克隆节点：cloneNode（true/false）；括号里面可以有两个参数选择,谁调用这个方法，就克隆谁，两个参数的意义各不相同，true是指深度克隆，指会将元素里面的所有节点都一模一样克隆复制出来；而false是浅克隆，指只克隆该元素一个节点，不会将内部节点克隆出来。