JS学习笔记DOM操作应用-创建插入和删除元素;文档碎片

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS学习笔记DOM操作应用-创建插入和删除元素;文档碎片相关的知识,希望对你有一定的参考价值。

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

(1)创建DOM元素

  createElement(标签名) 创建一个节点

  appendChild(节点) 追加一个节点

  例子:为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=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oUl=document.getElementById(‘ul1‘);
    var oTxt=document.getElementById(‘txt1‘);
    
    oBtn.onclick = function()
    {
        var oLi=document.createElement(‘li‘);/*创建好的li,系统并不知道要放在什么位置,需要我们自己设置*/
        oLi.innerHTML=oTxt.value;
        //父级,.appendChild(子节点);
        oUl.appendChild(oLi);/*oLi作为一个子节点添加给oUl*/
        };
    };
</script>
</head>

<body>
<input id="txt1" ytpe="text" />
<input id="btn1" type="button" value="创建li" />
<ul id="ul1">
</ul>
</body>
</html>

 

(2)插入元素

  insertBefore(节点,原有节点) 在已有元素钱插入

  例子:倒序插入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=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function ()
{
    var oBtn=document.getElementById(‘btn1‘);
    var oUl=document.getElementById(‘ul1‘);
    var oTxt=document.getElementById(‘txt1‘);
    
    oBtn.onclick = function()
    {
        var oLi=document.createElement(‘li‘);/*创建好的li,系统并不知道要放在什么位置,需要我们自己设置*/
        var aLi=oUl.getElementsByTagName(‘li‘);
        oLi.innerHTML=oTxt.value;
        //父级,.appendChild(子节点);
        //oUl.appendChild(oLi);/*oLi作为一个子节点添加给oUl*/
        //这段代码用来兼容IE
        if(aLi.length>0)
        {
            oUl.insertBefore(oLi,aLi[0]);/*每次往第0个li之前插入*/
            }
        else
        {
            oUl.appendChild(oLi);/*如果之前没有li,则直接使用appendChild追加一个节点*/
            }
        
        };
    };
</script>
</head>

<body>
<input id="txt1" ytpe="text" />
<input id="btn1" type="button" value="创建li" />
<ul id="ul1">
</ul>
</body>
</html>

 

(3)删除DOM元素

  removeChild(节点) 删除一个节点

  例子:删除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=utf-8" />
<title>删除元素</title>
</head>
<script>
window.onload = function ()
{
    var aA=document.getElementsByTagName(‘a‘);
    var oUl=document.getElementById(‘ul1‘);
    
    for(var i=0;i<aA.length;i++)
    {
        aA[i].onclick = function ()
        {
            oUl.removeChild(this.parentNode);
            };
        }
    };
</script>
<body>
<ul id="ul1">
    <li>aaaaa<a href="javascript:;">删除</a></li>
    <li>bbbbbb<a href="javascript:;">删除</a></li>
    <li>cccccc<a href="javascript:;">删除</a></li>
    <li>dddddd<a href="javascript:;">删除</a></li>
</ul>
</body>
</html>

 

二、文档碎片

(1)文档碎片可以提高DOM的操作性能(理论上),但是只在低级的浏览器里面有用,如果在高级浏览器中,用这种方法可能会导致性能不但没有提高反而降低了。

比如要插入一万个li标签,如果没有文档碎片,就必须插入一个然后页面渲染一次,插入完全部就要渲染一万次,太损耗性能。利用文档碎片,可以先把需要修改的全部放入文档碎片中,再一次渲染。

(2)文档碎片原理

(3)document.createDocumentFragment()

 

<!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=utf-8" />
<title>文档碎片2</title>
<script>
window.onload = function ()
{
    var oUl=document.getElementById(‘ul1‘);
    var oFrag=document.createDocumentFragment();/*创建文档碎片*/
    
    for(var i=0;i<10000;i++)
    {
        var oLi=document.createElement(‘li‘);
        
        oFrag.appendChild(oLi);/*直接往文档碎片里面装*/
        
        }
        oUl.appendChild(oFrag);/*直接把文档碎片一次性装进oUl中*/
    };
</script>
</head>

<body>
<ul id="ul1">
    
</ul>
</body>
</html>

 





































































































































以上是关于JS学习笔记DOM操作应用-创建插入和删除元素;文档碎片的主要内容,如果未能解决你的问题,请参考以下文章

js学习笔记18----元素创建操作

js的DOM节点操作:创建 ,插入,删除,复制,查找节点

Javascript进阶篇——(DOM—节点---插入删除和替换元素创建元素创建文本节点)—笔记整理

juqery学习笔记DOM操作

jQuery学习笔记之DOM树创建新节点append方法

javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点