获取节点操作DOM树

最新推荐文章于 2023-05-12 13:44:41 发布

原创最新推荐文章于 2023-05-12 13:44:41 发布 · 532 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

16 篇文章

订阅专栏

本文通过一个具体的HTML页面实例介绍了如何使用JavaScript来实现DOM元素的操作，包括元素的移动、复制、删除及文本的添加等。这些操作对于前端开发者来说非常实用，可以帮助他们更好地理解和掌握DOM操作的方法。

        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style type="text/css">
                #div1{
                    width: 150px;
                    height: 160px;
                    border: 1px solid red;
                }
                #div2{
                    width: 150px;
                    height: 100px;
                    border: 1px double blue;
                }
            </style>
        </head>
        <body>
        <div id="div1">
            <ul id = "ul01">
                <li>001</li>
                <li>002</li>
                <li>003</li>
                <li>004</li>
            </ul>
        </div>
        <div id="div2">
        </div>
        <input type="button" value="移动到下面" onclick="mov();">
        <input type="button" value="复制到下面" onclick="cop();">
        <input type="button" value="删除DIV2的元素" onclick="del();">
        <input type="button" value="添加文本" onclick="addtext();">
        <script type="text/javascript">
            var u1 = document.getElementById("ul01");
            var m1 = document.getElementById("div1");
            var m2 = document.getElementById("div2");
            function mov() {
               if(m1.childNodes.length >1 && m2.childNodes.length ==1){
                   m2.appendChild(u1);
               }else {
                   alert("已移动或上面没有元素")
               }
            }//移动元素
            function cop() {
                if(m1.childNodes.length >1 && m2.childNodes.length ==1){
                    cp1 = u1.cloneNode(true);
                    m2.appendChild(cp1);
                }else{
                    alert("已复制或上面没有元素")
                }
            }//复制元素
            function del() {
                if(m2.childNodes.length>1){
                    for(var i = 1;i<m2.childNodes.length;i++){
                        m2.removeChild(m2.childNodes[i]);
                    }
                }else if(m2.childNodes.length ==1){
                    alert("DIV2中没有元素");
                }

            }//删除元素
            function addtext() {
                var txt1 = window.prompt("请输入插入的序号位置，如1，2，3，4","1");
                var txt2 = window.prompt("请输入添加的文本，如005","005");
                var lis = document.createElement("li");
                var txs =  document.createTextNode(txt2);
                lis.appendChild(txs);
                u1.insertBefore(lis,u1.childNodes[txt1]);
            }
        </script>
        </body>