Dom终

2022-11-23 07:30:37

l创建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>创建li</title>

<script>

window.onload=function()

{

    //获取按钮

    var oBtn=document.getElementById('btn1');

    //获取文本

    var oTxt=document.getElementById('txt1');

    //获取ul

    var oUl=document.getElementById('ul1');

    oBtn.onclick=function()

    {

        //在do里创建li

        var oLi=document.createElement('li');

        //文本框的值赋予oli

        oLi.innerHTML=oTxt.value;

        //父类添加子节点

        oUl.appendChild(oLi);

        //清空txt里的值

        oTxt.value='';

        }

    }

</script>

</head>

<body>

<input id="txt1" type="text" />

<input id="btn1" type="button" value="创建Li"/>

<ul id="ul1">

    <li>aaa</li>

</ul>

</body>

</html>

l插入元素

•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>父.insertBefore(子节点，谁之前)</title>

<script>

window.onload=function()

{

    var oBtn=document.getElementById('btn1');

    var oTxt=document.getElementById('txt1');

    var oUl=document.getElementById('ul1');

    oBtn.onclick=function()

    {    //创建个li

        var oLi=document.createElement('li');

        //获取ul里的li

        var aLi=oUl.getElementsByTagName('li');

        //把otxt的值赋予oli

        oLi.innerHTML=oTxt.value;

        //插入到oul里ali[0]坐标之前；

        oUl.insertBefore(oLi, aLi[0]);

        oTxt.value='';

        }

    }

</script>

</head>

l删除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>

<script>

window.onload=function()

{

    var aA=document.getElementsByTagName('a');

    var oUl=document.getElementById('ul1');

    var i=0;

    for(i=0; i<aA.length; i++)

    {

        //点击a标签执行函数

        aA[i].onclick=function()

        {

            //删除oul的父级；

            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>

l文档碎片

•文档碎片可以提高DOM操作性能(理论上)

•文档碎片原理

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>测试文档碎片</title>

<script>

window.onload=function()

{

    var oBtn1=document.getElementById('btn1');

    var oUl=document.getElementById('ul1');

    var oBtn2=document.getElementById('btn2');

     oBtn1.onclick=function(){

         //获取时间

        var iStart=new Date().getTime();

        var i=0;

        for(i=0; i<10000; i++)

        {         //创建个li

            var oLi=document.createElement('li');

              //  添加li到ul

            oUl.appendChild(oLi);

            }

            //减去刚才使用时间

            alert(new Date().getTime()-iStart);

        }

     oBtn2.onclick=function()

     {

         var iStart=new Date().getTime();

         //创建文本对象片段

         var oFrag=document.createDocumentFragment();        var i=0;

         for(i=0; i<10000; i++)

         {

             //利用文本碎片创建li

             var oLi=document.createElement('li');

             //添加到文本

             oFrag.appendChild(oLi);

             }

             //获取当前时间减去程序开始时间

             alert(new Date().getTime()-iStart);

         }

}

</script>

</head>

<body>

<input id="btn1" type="button" value="普通"/>

<input id="btn2" type="button" value="碎片">

<ul id="ul1">

</ul>

</body>

</html>

码农公寓

相关文章