dom增刪改

阿新 • • 發佈：2020-12-08

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">

        window.onload=function(){
            myClick( 
"btn01",function(){
                //  alert("hello");//測試是否執行
/*---------------1.建立一個“廣州”節點，新增到#city下--------------------*/

            

            // 建立廣州節點<li>廣州</li>
            /*建立li元素節點
                document.createElement()
                    可以用於建立一個元素節點物件，
                    它需要一個標籤名作為引數，將會根據標籤名建立元素節點物件，
                    並將建立好的物件作為返回值返回
              
*/

             var li=document.createElement("li");   
                // alert(li);//測試
            /*建立廣州文字節點
                document.createTextNode()
                    可以用來建立一個文字節點物件
                    需要一個文字內容作為引數，將會根據該內容建立文字節點，並將新的節點返回
             */
             
             var gzText=document.createTextNode(" 
廣州");    
                // alert(gzText);//測試

            //  將gzText設定的li的子節點
            /* 
            appendChild()
                -向一個父節點中新增一個新的子節點
                -用法：父節點.appendChild(子節點)；
             */
             li.appendChild(gzText);     

            // 獲取id為city的節點
            var city=document.getElementById("city");
            
            // 將廣州新增到city下
            city.appendChild(li);

            });



/*---------------2.將“廣州”節點插入到#bj前面--------------------------*/
            myClick("btn02",function(){

                // 建立一個廣州
                var li=document.createElement("li");
                var gzTest=document.createTextNode("廣州");
                li.appendChild(gzTest);
                // 獲取id為bj的節點
                var bj=document.getElementById("bj");
                // 獲取city
                var city=document.getElementById("city");
                /* 
                    insertBefore()
                        -可以在指定的子節點前插入新的子節點
                        -語法：
                            父節點.insertBefore(新節點，舊節點);
                 */
                city.insertBefore(li,bj);
            });




/*----------- 3.使用“廣州”節點替換#bj節點-----------------------------*/
            myClick("btn03",function(){
                var li=document.createElement("li");
                var gzTest=document.createTextNode("廣州");
                li.appendChild(gzTest);
                var bj=document.getElementById("bj");
                var city=document.getElementById("city");
                city.replaceChild(li,bj);

                /* 
                    replaceChild()
                        -可以使用指定的子節點替換已有的子節點
                        -語法：父節點.replaceChild(新節點，舊節點);

                 */

            });
            



/*--------------- 4.刪除#bj節點--------------------------------*/
            myClick("btn04",function(){
                var bj=document.getElementById("bj");
                var city=document.getElementById("city")
                // city.removeChild(bj);
                bj.parentNode.removeChild(bj);

                /* 
                    removeChild()
                        -可以刪除一個子節點
                        -語法：父節點.removeChild(子節點);

                    子節點.parentNode.removeChild(子節點);
                 */
            });

/*------------- 5.讀取#city內的HTML程式碼-------------*/
            myClick("btn05",function(){
                var city=document.getElementById("city");
                console.log(city.innerHTML);
            });



/*---------------6.設定#bj內的HTML程式碼-------------*/
            myClick("btn06", function () {
                var bj=document.getElementById("bj");
                bj.innerHTML="昌平"
            
            });
/*---------------7.建立一個“廣州”節點，新增到#city下--------------------*/
            myClick("btn07", function () {
                var city=document.getElementById("city");
                // city.innerHTML +="<li>廣州</li>";

                    /* 
                        使用innerHTML也可以完成DOM的增刪改的相關操作
                        一般我們會兩種方式結合使用
                     */
                var li=document.createElement("li");
                li.innerHTML="廣州";
                city.appendChild(li);
   });
        };

        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
        }
    </script>
</head>
<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜歡哪個城市？
            </p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>首爾</li>
                <li>東京</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">建立一個“廣州”節點，新增到#city下</button></div>
        <div><button id="btn02">將“廣州”節點插入到#bj前面</button></div>
        <div><button id="btn03">使用“廣州”節點替換#bj節點</button></div>
        <div><button id="btn04">刪除#bj節點</button></div>
        <div><button id="btn05">讀取#city內的HTML程式碼</button></div>
        <div><button id="btn06">設定#bj內的HTML程式碼</button></div>
        <div><button id="btn07">設定#bj內的HTML程式碼</button></div>
    </div>
</body>
</html>