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 条评论