JavaScript 学习笔记(十二) dom
作者:bea
Dom createElement()、createTextNode()、appendChild()、removeChild()、replaceChild()、insertBefore()、createDocumentFragment() //创建新节点 function CreatNode() { var oP = document.createElement("p"); oP.innerHTML = "<font style='color:red;'>Hell
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只调用了一次来代替调用十次,提高性能。
有用 | 无用
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只调用了一次来代替调用十次,提高性能。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- window.onbeforeunload方法在IE下无法正常工作的解决办法
- JQuery 1.4 中的Ajax问题
- 用JS写的一个TableView控件代码
- JQuery 操作Javascript对象和数组的工具函数小结
- JavaScript 学习笔记(十四) 正则表达式
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- JQuery 构建客户/服务分离的链接模型中Table中的排序分析
- JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
- 被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
- jQuery 入门级学习笔记及源码
- JQuery 确定css方框模型(盒模型Box Model)
- Jquery实战_读书笔记2 选择器
- Jquery实战_读书笔记1—选择jQuery
- jquery last-child 列表最后一项的样式
- javascript 拖放效果实现代码
- JAVASCRIPT style 中visibility和display之间的区别
- javascript 获取url参数和script标签中获取url参数函数代码
- javascript 实现自由落体的方块效果
- JavaScript 学习笔记(十三)Dom创建表格