14. 节点操作

1.创建节点
创建新的Element节点可以使用Document对象的createElement()方法。给方法传递元素的标签名(HTML文档该名字不区分大小写,XML则区分大小写)。


var newnode = document.createTextNode("a")

创建Text节点使用Document对象的createTextNode();


var newnode = document.createTextNode("text node content")

2.插入节点
一旦有了一个新节点,使用Node的方法appendChild()或insertBefore()将它插入到文档中。
appendChild()是在需要插入的Element节点上调用的,它插入指定的节点使其成为那个节点的最后一个子节点。

<xmp>
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstChild);
alert(returnedNode == someNode.firstChild); //false
alert(returnedNode == someNode.lastChild); //true

var div = document.createElement("div");
div.id = "myNewDiv";
div.className = "box";
document.body.appendChild(div);
</xmp>

insertBefore()需要接受2个参数,第一个参数是待插入的节点,第二个参数是已存在的节点,新节点将插入该节点的前面。

<xmp>
//插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode, null);
alert(newNode == someNode.lastChild); //true

//插入后成为第一个子节点
var returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstChild); //true

//插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true
</xmp>


3.替换节点
replaceChild()方法删除一个子节点并用一个新的节点取而代之。在父节点上调用该方法,第一个参数是新节点,第二个参数是需要代替的节点。

<xmp>
n.parentNode.replaceChild(document.createTextNode("read"),n);

//用一个b元素替换n节点,并使n成为该元素的子节点
function embolden(n){
    if(typeof n == "string"){
       n = document.getElementById(n);
    }
    var parent = n.parentNode;             // 获取n的父节点
    var b = document.createElement("b");   // 创建一个b元素
    parent.replaceChild(b,n);              // 用b元素替换节点n
    b.appendChild(n);                      // 使n成为b元素的子节点
}
</xmp>

4.复制节点
cloneNode()返回该节点的一个全新副本。给方法传递参数true递归地复制所有后代节点,或传递参数false只执行一个浅复制。

<xmp>
<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
</xmp>
<xmp>
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3(IE < 9)或 7(其他浏览器)
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0
</xmp>


5.删除节点
removeChild()方法是从文档树中删除一个节点。该方法不是在待删除的节点上使用,而是在其父节点上调用。在父节点上调用该方法,并将需要删除的子节点作为方法参数传递给它。

<xmp>
//移除第一个子节点
var formerFirstChild = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild = someNode.removeChild(someNode.lastChild);
</xmp>
评论

0 条评论