DOM操作以及其它案例总结

最新推荐文章于 2022-07-14 20:09:23 发布

Xing_brother

最新推荐文章于 2022-07-14 20:09:23 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/Xing_brother/article/details/75435781

版权

This is my first blog,

DOM全称就是Document Object Model（文档对象模型）。

DOM应用方法以及操作：

1、创建DOM元素

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

appendChild(节点) 追加一个节点

例子：为ul插入li

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=function ()

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

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

        oBtn.οnclick=function ()

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

               //父级.appendChild(子节点);

               oUl.appendChild(oLi);

};

};

</script>

</head>

<body>

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

<ul id="ul1">

</ul>

</body>

</html>

想节点有值：加一个文本表单

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=function ()

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

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

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

        oBtn.οnclick=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">

</ul>

</body>

</html>

2、插入DOM元素

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

例子：倒序插入li

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=function ()

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

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

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

        oBtn.οnclick=function ()

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

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

               oLi.innerHTML=oTxt.value;

               //父级.appendChild(子节点);

               //oUl.appendChild(oLi);

               if(aLi.length>0)

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

               else

                       oUl.appendChild(oLi);

};

};

</script>

</head>

<body>

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

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

<ul id="ul1">

</ul>

</body>

</html>

3、删除DOM元素

removeChild(节点) 删除一个节点

例子：删除li

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=function ()

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

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

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

               aA[i].οnclick=function ()

                       oUl.removeChild(this.parentNode);

};

};

</script>

</head>

<body>

<ul id="ul1">

        <li>asfasd <a href="javascript:;">删除</a></li>

        <li>5645 <a href="javascript:;">删除</a></li>

        <li>ghdfjgj <a href="javascript:;">删除</a></li>

        <li>mvbnmvnb <a href="javascript:;">删除</a></li>

</ul>

</body>

</html>

4、文档碎片：类似一个临时的文档，要所有要加的dom元素先放在这里，达到不要每次操作dom元素提高页面效率

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

文档碎片原理

document.createDocumentFragment()

没有使用文档碎片之前：

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=function ()

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

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

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

               oUl.appendChild(oLi);

};

</script>

</head>

<body>

<ul id="ul1">

</ul>

</body>

</html>

加入文档碎片：

  <!DOCTYPE HTML>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <script>

  window.οnlοad=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);

};

</script>

</head>

<body>

<ul id="ul1">

</ul>

</body>

</html>

其实真实工作，这个文档碎片效果不大，因为很少插入很多标签。高级的浏览器也性能很好。下面有个测试性能的代码，大家感兴趣可以测试一下时间。主要是针对面试的时候，大家了解即可。

  var d1 = new Date();

      //创建十个段落,常规的方式

      for(var i = 0 ; i < 1000; i ++) {

          var p = document.createElement("p");

          var oTxt = document.createTextNode("段落" + i);

          p.appendChild (oTxt);

          document.body.appendChild(p);

      var d2 = new Date();

    document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime()));

    //使用了createDocumentFragment()的程序

    var d3 = new Date();

    var pFragment = document.createDocumentFragment();

    for(var i = 0 ; i < 1000; i ++) {

        var p = document.createElement("p");

        var oTxt = document.createTextNode("段落" + i);

        p.appendChild(oTxt);

        pFragment.appendChild(p);

    document.body.appendChild(pFragment);

    var d4 = new Date();

    document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime()));

关注