您的位置：首页 > Web前端 > JavaScript

2016年5月26日晚上（妙味课堂js基础-2笔记三（DOM））

2016-05-26 20:29 507 查看

一、创建、插入和删除元素

　　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

　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航