JS之DOM節點增刪改查與屬性設定

阿新 • • 發佈：2021-07-20

增刪改查演示

增:

'''
createElement(name)建立元素
appendChild();將元素新增
'''

刪:

'''
獲得要刪除的元素
獲得它的父元素
使用removeChild()方法刪除
'''

改:

第一種方式:

使用上面增和刪結合完成修改

第二種方式:

使用setAttribute();方法修改屬性

使用innerHTML屬性修改元素的內容

查: 使用之前介紹的方法.

<script type="text/javascript">
//在第一個div中動態增加一個a標籤. 該a標籤點選之後跳轉到百度首頁.
    function addNode(){
         
//1.獲得 第一個div
        var div = document.getElementById("div_1");
        //2.建立a標籤  createElement==>建立一個a標籤   <a></a>
        var eleA =  document.createElement("a");
        //3.為a標籤新增屬性 <a href="http://www.baidu.com"></a>
        eleA.setAttribute("href", "http://www.baidu.com");
         
//4.為a標籤新增內容 <a href="http://www.baidu.com">百度</a>
        eleA.innerHTML = "百度";    
        //5.將a標籤新增到div中
        div.appendChild(eleA);
    }
    //點選後 刪除div區域2
    function deleteNode(){
        //1 獲得要刪除的div區域
            var div = document.getElementById("div_2");
        //2.獲得父親
            var 
 parent = div.parentNode;
        //3 由父親操刀 
            parent.removeChild(div);
    }
    //點選後 替換div區域3 為一個美女
    function updateNode(){
        //1 獲得要替換的div區域3
        var div = document.getElementById("div_3");
        //2建立img標籤物件 <img />
        var img = document.createElement("img");
        //3新增屬性 <img src="001.jpg" />
        img.setAttribute("src", "001.JPG");
        //4.獲得父節點
        var parent = div.parentNode;
        //5.替換
        parent.replaceChild(img, div);
    }
    //點選後 將div區域4 克隆一份 新增到頁面底部
    
    function copyNode(){
        //1.獲取要克隆的div
        var div = document.getElementById("div_4");
        //2.克隆 引數為true 那麼克隆時克隆所有子元素. false 只克隆自己
        var div_copy = div.cloneNode(true);
        //3.獲得父親
        var parent = div.parentNode;
        //4.新增
        parent.appendChild(div_copy);
    }
    
    
</script>

修改 HTML DOM

改變 HTML 內容

改變元素內容的最簡答的方法是使用 innerHTML ，innerText。

改變 CSS 樣式

'''
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";<br>                             .style.fontSize=48px
'''

改變 HTML 屬性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

建立新的 HTML 元素

createElement(name)

刪除已有的 HTML 元素

elementNode.removeChild(node)

關於class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1,.div2,.div3,.div4{
            width:300px;
            height:100px;
        }
        .div1{
            background-color: green;
        }
        .div2{
            background-color: #d900ff;
        }
        .div3{
            background-color: rebeccapurple;
        }
        .div4{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="div1">
        <button onclick="add()">新增</button>
        hello div1
    </div>
    <div class="div2">
        <button onclick="del()">刪除</button>
        hello div2
    </div>
    <div class="div3">
        <button onclick="change()">修改</button>
        <p>hello div3</p>
    </div>
    <div class="div4 div5">hello div4</div>

    <script>
        // node的CURD
        function add() {
            var ele=document.createElement('p'); // 建立元素
            ele.innerHTML='<h6>hello p<h6>'; // 為所建立元素新增文字
            // ele.innerText='<h6>hello p<h6>'; // 和innerHTML有區別
            var ele1=document.getElementsByClassName('div1')[0]; // 找到其父元素
            ele1.appendChild(ele); // 將元素新增，必須是父節點進行操作
        };
        function del() {
            var ele1=document.getElementsByClassName('div1')[0]; // 獲得要刪除的元素的父元素
            var ele=ele1.getElementsByTagName('p')[0]; // 獲得要刪除的元素
            ele1.removeChild(ele); // 刪除元素，必須是其父元素進行操作
        };
        function change() {
            var img=document.createElement('img'); // 建立元素
            // img.setAttribute('src', 'icon.jpg'); 和下面一樣的功能
            img.src='icon.jpg'; // 找到img標籤的圖片路徑
            img.style.width='50px';
            img.style.height='50px';
            var ele1=document.getElementsByClassName('div3')[0]; // 找到要修改元素的父元素
            ele=ele1.getElementsByTagName('p')[0]; // 找到要修改的元素
            ele1.replaceChild(img,ele); // 修改元素，必須是其父元素進行操作
        };
        // 關於class的操作(可用於對標籤的隱藏及顯現的操作)
        var div=document.getElementsByClassName('div4')[0];
        console.log(div.className); // div4 div5獲取標籤所有的class值
        console.log(div.classList); // ["div4", "div5", value: "div4 div5"]獲取標籤所有class值並返回一個數組
        console.log(div.classList[0]); // div4
        div.classList.add('hide'); // 新增標籤的一個class值
        console.log(div.className); // div4 div5 hide
        div.classList.remove('hide'); // 刪除標籤的一個class值
        console.log(div.className); // div4 div5
    </script>
</body>
</html>

while True: print('studying...')