现在的位置: 首页 > 综合 > 正文

JavaScript学习笔记(十二)

2011年03月28日 ⁄ 综合 ⁄ 共 1133字 ⁄ 字号 评论关闭

JavaScript学习笔记(十二)

新的一章的学习----Dom,重点啊

Dom

createElement()createTextNode()appendChild()removeChild()replaceChild()insertBefore()createDocumentFragment()

//创建新节点

function CreatNode() {

    var oP = document.createElement("p");

    oP.innerHTML = "<font style='color:red;'>Hello World</font>";

 

    document.body.appendChild(oP);

}

 

 

//删除节点

function RemoveNode() {

    var oP = document.getElementsByTagName("p");

    var len = oP.length;

    if (len != 0) {

        oP[len - 1].parentNode.removeChild(oP[len - 1]);  //这里最好使用节点的parentNode特性来删除

    }

    else {

        alert("已经全部删除!");

    }

}

 

//替换节点

function ReplaceNode() {

    var oNewP = document.createElement("p");

    oNewP.innerHTML = "<font style='color:red;'>New --> Hello World</font>";

   

    //将最后一个新增的节点替换成oNewP

    var len = document.getElementsByTagName("p").length;

 

    var oOldLastP = document.getElementsByTagName("p")[len - 1];

    oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);

 

}

 

//insertBefore()方法

让新消息出现在旧消息之前,接受两个参数:

1.要添加的节点;2.插在哪个节点之前

xxx.parentNode.insertBefore(newChild, oldChild);

 

//createDocumentFragment()方法

创建文档碎片

可以把一些创建的十个新的节点元素都添加到文档碎片中,然后这个碎片作为参数传递给要添加碎片的appendChild()

xxx.appendChild(oFragment);

这样xxx只调用了一次来代替调用十次,提高性能。

 

 

2010-01-20

【上篇】
【下篇】

抱歉!评论已关闭.