JavaScript-DOM操作应用

最新推荐文章于 2019-11-13 19:25:50 发布

zLanaDelRey

最新推荐文章于 2019-11-13 19:25:50 发布

阅读量188

点赞数

分类专栏：前端文章标签： dom

本文链接：https://blog.csdn.net/zLanaDelRey/article/details/80113901

版权

前端专栏收录该内容

30 篇文章 4 订阅

订阅专栏

创建、插入和删除元素

创建DOM元素

creatElement('标签元素')
父级.appendChild(子节点)//添加到父级末尾

插入元素

父级.insertBefore(子节点，在谁之前)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var oBtn=document.getElementById('btn');
        var oTxt=document.getElementById('txt1');
        var Li=document.getElementsByTagName('li');
            oBtn.onclick=function(){
                 var oLi=document.createElement('li');
                 oLi.innerHTML=oTxt.value;

            if(Li.length>0)
            {
                oUl.insertBefore(oLi,Li[0]);
            }
            else
            {
                oUl.appendChild(oLi);
            }
        };
    };
    </script>
</head>
<body>
    <input id="txt1" type="text">
     <input id="btn" type="button" value="创建列表">
    <ul id="ul1">
    </ul>
</body>
</html>

删除DOM元素

父级.removeChild(子节点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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>
</head>
<body>
    <ul id="ul1">
        <li>第一条<a href="javascript:;">删除</a></li>
        <li>第二条<a href="javascript:;">删除</a></li>
        <li>第三条<a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

文档碎片

1、文档碎片可以提高DOM操作性能（理论上）
2、文档碎片原理
3、document.createDocumentFragment()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</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);
    };
    </script>
</head>
<body>
    <ul id="ul1">

    </ul>
</body>
</html>