手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十二) dom
摘要:DomcreateElement()、createTextNode()、appendChild()、removeChild()、replac...

Dom

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

//创建新节点

function CreatNode() {

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

oP.innerHTML = "<font>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>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只调用了一次来代替调用十次,提高性能。

【JavaScript 学习笔记(十二) dom】相关文章:

详解JavaScript中的表单验证

AngularJS学习笔记之ng-options指令

JavaScript编程学习技巧汇总

JavaScript中fixed()方法的使用简介

JavaScript AOP编程实例

JavaScript版代码高亮

JavaScript基本语法讲解

Javascript高级应用:文件操作篇

在JavaScript应用中使用RequireJS来实现延迟加载

javascript每日必学之运算符

精品推荐
分类导航