2016年5月26日晚上（妙味课堂js基础-2笔记三（DOM））
一、创建、插入和删除元素
1、创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
——例子：为ul插入li
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oBtn=document.getElementById('btn1'); var oUl=document.getElementById('ul1'); oBtn.onclick=function () { var oLi=document.createElement('li'); //父.appendChild(子节点) oUl.appendChild(oLi); } } </script> </head> <body> <input id="btn1" type="button" value="创建Li"/> <ul id="ul1"> <li>aaa</li> </ul> </body>
注意：appendChild() 方法向节点添加最后一个子节点。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
oLi.innerHTML=oTxt.value;
//父.appendChild(子节点)
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
<li>aaa</li>
</ul>
</body>
由上面代码可知：每次添加的内容都是添加在后面；那要如何才能添加到前面去呢？
2、插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
——例子：倒序插入li
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//父.insertBefore(子节点, 谁之前)
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li'); //数组
oLi.innerHTML=oTxt.value;
oUl.insertBefore(oLi, aLi[0]);
}
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
<li>aaa</li>
</ul>
</body>
如果原来没有元素，那要怎么在这个元素之前插入另一个元素呢？代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//父.insertBefore(子节点, 谁之前)
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
var oLi=document.createElement('li');
var aLi=oUl.getElementsByTagName('li');
oLi.innerHTML=oTxt.value;
if(aLi.length==0)
{
oUl.appendChild(oLi); //再用appendChild（）元素进行添加元素
}
else
{
oUl.insertBefore(oLi, aLi[0]);
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="创建Li"/>
<ul id="ul1">
</ul>
</body>
3、删除DOM元素
removeChild(节点) 删除一个节点
——例子：删除li
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var i=0;
for(i=0;i<aA.length;i++)
{
aA[i].onclick=function ()
{
oUl.removeChild(this.parentNode);
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>sdfsdf <a href="javascript:;">删除</a></li>
<li>3432 <a href="javascript:;">删除</a></li>
<li>tttt <a href="javascript:;">删除</a></li>
<li>ww <a href="javascript:;">删除</a></li>
</ul>
</body>
二、文档碎片
（1）文档碎片可以提高DOM操作性能（只是理论上可以提高）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
var iStart=new Date().getTime();
var i=0;
for(i=0;i<100000;i++)
{
var oLi=document.createElement('li');
oUl.appendChild(oLi);
}
alert(new Date().getTime()-iStart);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="普通"/>
<ul id="ul1">
</ul>
</body>
（2）文档碎片原理
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
var iStart=new Date().getTime();
var oFrag=document.createDocumentFragment();
var i=0;
for(i=0;i<100000;i++)
{
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
alert(new Date().getTime()-iStart);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="碎片"/>
<ul id="ul1">
</ul>
</body>
（3）document.CreateDocumentFragment
