js节点操作

在看《javascript高级程序设计》，看到节点操作这一块，觉得我只知道用appendChild(),太肤浅了，记录下学到的东西。

每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。包含在 childNodes 列表中的所有节点都具有相同的父节点，因此它们的 parentNode 属性都指向同一个节点。此外，包含在childNodes 列表中的每个节点相互之间都是同胞节点。 通过使用列表中每个节点的 previousSibling和 nextSibling 属性， 可以访问同一列表中的其他节点。 列表中第一个节点的 previousSibling 属性值为 null ，而列表中最后一个节点的 nextSibling 属性的值同样也为 null。

节点（note）之间的关系如下图：



每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。请注意，虽然可以通过方括号语法来访问 NodeList 的值，而且这个对象也有 length 属性，但它并不是 Array 的实例。 NodeList 对象的独特之处在于，它实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映在 NodeList 对象中。我们常说， NodeList 是有生命、有呼吸的对象，而不是在我们第一次访问它们的某个瞬间拍摄下来的一张快照。

访问保存在 NodeList 中的节点，可以这样：

//获取第一个子元素
①var firstChild = someNode.childNodes[0];
②var secondChild = someNode.childNodes.item(1);
//判断元素是否包含子元素
①var count = someNode.childNodes.length;
②var isHas=someNode.hasChildNodes();

　　 将 NodeList 对象转换为数组（对 arguments 对象使用 Array.prototype.slice() 方法可以将其转换为数组）：

function convertToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //除 IE8 及更早版本之外，这行代码能在任何浏览器中运行，
} catch (ex) {
array = new Array();
for (var i=0, len=nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}

　　 操作节点的方法：

1.appendChild() -------someNode.appendChild(newNode)

向 someNode的childNodes 列表的末尾添加一个节点。

2.insertBefore() ---------someNode.insertBefore(newNode, someNode.firstChild)

这个方法接受两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点

3.replaceChild() ---------someNode.replaceChild(newNode, someNode.firstChild);

接受的两个参数是： 要插入的节点和要替换的节点。

4.removeChild() ----------someNode.removeChild(someNode.lastChild);

与使用 replaceChild() 方法一样，通过 removeChild() 移除的节点仍然为文档所有，只不过在文档中已经没有了自己的位置。

5.cloneNode() -----参数可以带ture或者false,表示是否深度复制，这个方法应该很少用到，略过。

6.normalize() -------作用是处理文档树中的文本节点,也略过

操作节点的例子：

(function(){
function del_ff(elem){              //去除空节点
var elem_child = elem.childNodes;
console.log(elem_child)
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child[i])
}
}
}
var getElementByClassName=function(className){
var arr= new Array();
var tagArr = document.getElementsByTagName("div");
for(var i=0;i<tagArr.length;i++){
if(tagArr[i].className.indexOf(className)>-1){
arr.push(tagArr[i]);
}
}
return arr;
};
var b=getElementByClassName("czzhpf-hd-1");
var a=b[0];
del_ff(a);
var chils= a.childNodes;
chils[0].style.display="none";   //第一个子元素
chils[1].style.display="none";   //第二个子元素
chils[2].style.display="none";   //第三个子元素

})
()