js 对象数组遍历 DOM 模型概述(4)

document.body.appendChild(p);

如果参数是DOM中已经存在的节点，appendChild方法将会将其从原来的位置，移动到新位置。

Node.hasChildNodes()

Node.hasChildNodes方法返回一个布尔值，表示当前节点是否有子节点。

var foo = document.getElementById("foo");

if(hasChildNodes()){

foo.removeChild(foo.childNodes[0]);

}

上面代码表示，如果foo节点有子节点，就移除第一个子节点。

hasChildNodes方法结合firstChild属性和nextSibling属性，可以遍历当前节点的所有后代节点。

function DOMComb(parent,callback){

if(parent.hasChildNodes()){

for(var node = parent.firstChild;node;node = node.nextSibling){

DOMComb(node,callback);

}

}

callback.call(parent);

}

上面代码的DOMComb函数的第一个参数是某个指定的节点，第二个参数是回调函数。这个回调函数会一次作为指定节点，以及指定节点的所有后代节点。

function printContent(){

if(this.nodeValue){

console.log(this.nodeValue);

}

}

DOMComb(document.body,printContent);

Node.cloneNode()

Node.cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不可隆子节点。

var cloneUL = document.querySelector('ul').cloneNode(true);

需要注意的是，克隆一个节点，会拷贝该节点的所有属性，但是会丧失addEventListener方法和on-属性(即node.onclick = fn)，添加在这个节点上的时间回调函数。

可能一个节点之后，DOM树有可能出现两个相同的ID属性(即id = “xxx”)的html元素，这是应该修改其中一个HTML元素，这是应该修改其中一个HTML元素的ID属性。

Node.insertBefore()

insertBefore方法用于将某个节点插入当前节点内部的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点内部的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

var text1 = document.createTextNode('1');

var li = document.createElement('li');

li.appendChild(text1);

var ul = document.querySelector('ul');

ul.insertBefore(li,ul.firstChild);

上面代码使用当前节点的firstChild属性，在

节点的最前面插入一个新建的节点，新节点变成第一个子节点。

parentElement.insertBefore(newElement,parentElement.firstChild);

上面代码中，如果当前节点没有任何子节点，parentElement.firstChild会返回null，则新节点会成为当前节点的唯一节点。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-58611-4.html