《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片
2016-05-31 19:56
519 查看
《JavaScript学习笔记》：DOM_添加节点、删除节点、文档碎片
在上篇博文中，主要介绍了关于DOM中获取子节点的相关知识点，除了获取子节点，DOM还有创建一个节点、加入节点、删除节点等知识点，本篇博文进行介绍。1、加入节点
语法：obj.appendChild(obj1);//就是在对象obj尾部中加入节点obj1.看下面这个例子：往ul中添加li节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function()
{
var oLi=document.createElement('li');//创建一个节点
oLi.innerHTML=oTxt.value;
oDiv.appendChild(oLi);//向标签div中追加一个子节点
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="插入节点"/>
<div id="div1">
</div>
</body>
</html>obj.appendChild(obj1);是在obj的尾部添加节点obj1,我们还可以往obj的某个节点前面添加节点，具体如下：
obj.insertBefore(obj1，原有节点);就是在obj中原有节点前面加入obj1.
下面我们也来看一个例子：每点击一次按钮，就在ul的第一个位置添加li
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var oTxt=document.getElementById('txt1');
oBtn.onclick=function()
{
var oLi=document.createElement('li');//创建一个节点
oLi.innerHTML=oTxt.value;
var aLi=oDiv.getElementsByTagName('li');
//解决兼容性
if(aLi.length==0)
{
oDiv.appendChild(oLi);
}
else
{
oDiv.insertBefore(oLi,aLi[0]);//向标签div中追加一个子节点
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="插入节点"/>
<div id="div1">
</div>
</body>
</html>2、删除节点
语法：obj.removeChild(obj1);在obj中删除节点obj1看一个例子：点击一次按钮就删除ul中一个li。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>删除DOM节点</title>
<script>
window.onload=function()
{
var oBtn1=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn1.onclick=function()
{
var aLi = oUl.getElementsByTagName('li');
if(aLi.length!=0)
{
oUl.removeChild(aLi[0]);//删除第一个结点
}
else
{
alert('这个元素节点下面已经没有节点了');
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="删除最前面的节点"/>
<ul id="ul1">
<li>bbbb</li>
<li>aaa</li>
<li>ccc</li>
<li>ddd</li>
<li>fff</li>
<li>ggg</li>
</ul>
</body>
</html>3、文档碎片
文档碎片，关于这个知识点，其实用的不太多，但是我们还是有必要了解一下。语法如下：document.createDocumentFragment();
文档碎片主要用处就是作为一个缓存来用，例如：当我们在程序中，我们向将一些信息写入到文件中，其实我们是首先将一些内容先写入缓存，当缓存中有一定量的内容时，然后计算机系统就将缓冲内的东西一次性的写入文件中，这样主要的目的是为了提高性能，避免多次的IO读写操作。同理，文档碎片也是起的这样一个目的：为了提高性能(理论上)。
下面来看一个例子：将10000个li写入到ul元素节点中。
直接插入法和借助于文档碎片进行插入这两种方法将所耗费的时间统计下，用于比较性能，看是否提高了性能。
1、直接插入法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick=function()
{
//创建一个文档碎片，先将所有节点加入到文档碎片中，最后再一起加入到ul1中
var date=new Date();
var secondTime=date.getSeconds();
var startTime=date.getMilliseconds();
//var odf=document.createDocumentFragment();
for(var i=0;i<100000;i++)
{
var oLi=document.createElement('li');
//odf.appendChild(oLi);
ul1.appendChild(oLi);
}
//ul1.appendChild(odf);
var date1=new Date();
var end=date1.getMilliseconds();
var secondTime2=date1.getSeconds();
alert((secondTime2-secondTime)+'秒'+(end-startTime)+'毫秒');
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="插入10000个元素节点" />
<ul id="ul1">
</ul>
</body>
</html>经过测试，上面这种方法直接每次直接往ul中添加li节点所耗费的时间为：591ms.
2、借助于文档碎片进行插入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick=function()
{
//创建一个文档碎片，先将所有节点加入到文档碎片中，最后再一起加入到ul1中
var odf=document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var oLi=document.createElement('li');
odf.appendChild(oLi);
}
ul1.appendChild(odf);
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="插入10000个元素节点" />
<ul id="ul1">
</ul>
</body>
</html>经过测试，上面这种方法借助文档碎片所耗费的时间为：164ms.因此，当我们需要大量的插入节点时，可以借助于文档碎片来提高性能。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表单验证和二级联动
- JSONP跨域问题演示
- JS时钟实现（一）
- JSP 实用程序之简易页面编辑器
- [RxJS] Transformation operator: repeat
- JS for与for in对比（包含性能测试）
- css和javascript中图片路径的不同
- css和javascript中图片路径的不同
- [RxJS] Error handling operator: catch
- JavaScript：引用类型
- <Js>html应用
- JavaScript获取表格的行数和列数
- howler.js音频控制js库
- fastjson生成和解析json数据，序列化和反序列化数据
- jersey 通过json方式实现增删改查
- Extjs甘特图|功能最强大的Web甘特图 - 项目管理软件和MES系统专家
- js实现点击按钮，弹出新窗口
- javascript 的module 模块化
- js导出txt
- 《JavaScript学习笔记》：DOM基础