JavaScript節(jié)點(diǎn)的增刪改查深入學(xué)習(xí)

更新時間：2023年01月26日 11:18:21 作者：Nakano_May

這篇文章主要為大家介紹了JavaScript節(jié)點(diǎn)的增刪改查深入學(xué)習(xí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

節(jié)點(diǎn)的增刪改查

節(jié)點(diǎn)的創(chuàng)建

document.createElement方法用來生成元素節(jié)點(diǎn)，并返回該節(jié)點(diǎn)。

var newDiv = document.createElement('div');

createElement方法的參數(shù)為元素的標(biāo)簽名，即元素節(jié)點(diǎn)的tagName屬性，對于 HTML 網(wǎng)頁大小寫不敏感，即參數(shù)為div或DIV返回的是同一種節(jié)點(diǎn)。如果參數(shù)里面包含尖括號（即<和>）會報(bào)錯。

document.createElement('<div>');
// DOMException: The tag name provided ('<div>') is not a valid name

注意，document.createElement的參數(shù)可以是自定義的標(biāo)簽名。

document.createElement('foo');

"孤兒節(jié)點(diǎn)"

新創(chuàng)建出的節(jié)點(diǎn)是 “孤兒節(jié)點(diǎn)”，這意味著它并沒有被掛載到 DOM 樹上，我們無法看見它。

必須繼續(xù)使用 appendChild() 或 insertBefore() 方法將孤兒節(jié)點(diǎn)插入到 DOM 樹上。

appendChild()

任何已經(jīng)在 DOM 樹上的節(jié)點(diǎn)，都可以調(diào)用 appendChild() 方法，它可以將孤兒節(jié)點(diǎn)掛載到它的內(nèi)部，成為它的最后一個子節(jié)點(diǎn)。

父節(jié)點(diǎn).appendChild(孤兒節(jié)點(diǎn));

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        // 創(chuàng)建孤兒節(jié)點(diǎn)
        var oP = document.createElement('p');
        // 設(shè)置內(nèi)部文字
        oP.innerText = '我是新來的';
        // 上樹
        oBox.appendChild(oP);
    </script>
</body>
</html>

insertBefore()

任何已經(jīng)在 DOM 樹上的節(jié)點(diǎn)，都可以調(diào)用 insertBefore() 方法，它可以將孤兒節(jié)點(diǎn)掛載到它的內(nèi)部，成為它的 “標(biāo)桿子節(jié)點(diǎn)” 之前的節(jié)點(diǎn)。

父節(jié)點(diǎn).insertBefore(孤兒節(jié)點(diǎn), 標(biāo)桿節(jié)點(diǎn));

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        var oPs = oBox.getElementsByTagName('p');
        // 創(chuàng)建孤兒節(jié)點(diǎn)
        var oP = document.createElement('p');
        // 設(shè)置內(nèi)部文字
        oP.innerText = '我是新來的';
        // 上樹
        oBox.insertBefore(oP, oPs[1]);
    </script>
</body>
</html>

節(jié)點(diǎn)創(chuàng)建小案例

【動態(tài)創(chuàng)建一個20行12列的表格】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="mytable"></table>
    <script>
        // 請動態(tài)創(chuàng)建出一個 20 行 12 列的表格
        var mytable = document.getElementById('mytable');
        for (var i = 0; i < 20; i++) {
            // 創(chuàng)建了新的 tr 標(biāo)簽
            var tr = document.createElement('tr');
            for (var j = 0; j < 12; j++) {
                // 創(chuàng)建了新的 td 標(biāo)簽
                var td = document.createElement('td');
                // 讓 tr 追加 td 標(biāo)簽
                tr.appendChild(td);
            }
            // 讓 mytable 追加 tr 標(biāo)簽
            mytable.appendChild(tr);
        }
    </script>
</body>
</html>

【九九乘法表】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td {
            width: 80px;
            height: 30px;
            padding-left: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="mytable"></table>
    <script>
        // 請創(chuàng)建九九乘法表
        var mytable = document.getElementById('mytable');
        for (var i = 1; i <= 9; i++) {
            // 創(chuàng)建了新的 tr 標(biāo)簽
            var tr = document.createElement('tr');
            for (var j = 1; j <= i; j++) {
                // 創(chuàng)建了新的 td 標(biāo)簽
                var td = document.createElement('td');
                // 設(shè)置 td 內(nèi)部的文字
                td.innerText = i + '×' + j + '=' + (i * j);
                // 讓tr追加 td 標(biāo)簽
                tr.appendChild(td);
            }
            // 讓 mytable 追加 tr 標(biāo)簽
            mytable.appendChild(tr);
        }
    </script>
</body>
</html>

移動節(jié)點(diǎn)

如果將已經(jīng)掛載到 DOM 樹上的節(jié)點(diǎn)成為 appendChild() 或者 insertBefore() 的參數(shù)，這個節(jié)點(diǎn)將會被移動。

新父節(jié)點(diǎn).appendChild(已經(jīng)有父親的節(jié)點(diǎn));

新父節(jié)點(diǎn).insertBefore(已經(jīng)有父親的節(jié)點(diǎn), 標(biāo)桿子節(jié)點(diǎn));

這意味著一個節(jié)點(diǎn)不能同時位于 DOM 樹的兩個位置。

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <p id="para">我是段落</p>
    </div>
    <div id="box2">
        <p>我是box2的原有p標(biāo)簽</p>
        <p>我是box2的原有p標(biāo)簽</p>
        <p>我是box2的原有p標(biāo)簽</p>
        <p>我是box2的原有p標(biāo)簽</p>
    </div>
    <script>
        var box2 = document.getElementById('box2');
        var para = document.getElementById('para');
        var ps_inbox2 = box2.getElementsByTagName('p');
        box2.insertBefore(para, ps_inbox2[2]);
    </script>
</body>
</html>

刪除節(jié)點(diǎn)

刪除現(xiàn)有的 DOM 節(jié)點(diǎn)，也需要關(guān)注兩個因素：首先由父節(jié)點(diǎn)刪除子節(jié)點(diǎn)，其次是要刪除哪個子節(jié)點(diǎn)。

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn)) 刪除指定的子節(jié)點(diǎn) 推薦方式：子節(jié)點(diǎn).parentNode.removeChild(子節(jié)點(diǎn))

在 JavaScript 原生DOM操作中，要刪除元素必須通過父元素刪除如不存在父子關(guān)系則刪除不成功刪除節(jié)點(diǎn)和隱藏節(jié)點(diǎn)（display:none）有區(qū)別的：隱藏節(jié)點(diǎn)還是存在的，但是刪除，則從html中刪除節(jié)點(diǎn)

父節(jié)點(diǎn).removeChild(要刪除子節(jié)點(diǎn));

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <p>我是p節(jié)點(diǎn)0</p>
        <p>我是p節(jié)點(diǎn)1</p>
        <p>我是p節(jié)點(diǎn)2</p>
    </div>
    <script>
        var box = document.getElementById('box');
        var the_first_p = box.getElementsByTagName('p')[0];
        box.removeChild(the_first_p);
    </script>
</body>
</html>

結(jié)論：removeChild 刪除節(jié)點(diǎn)時一定是由父子關(guān)系。

替換節(jié)點(diǎn)

replaceChild 實(shí)現(xiàn)子節(jié)點(diǎn)(對象)的替換。返回被替換對象的引用。

語法：

node.replaceChild (newnode,oldnew )

參數(shù)：

newnode : 必需，用于替換 oldnew 的對象。 oldnew : 必需，被 newnode 替換的對象。

我們來看看下面的代碼:

效果: 將文檔中的 Java 改為 JavaScript。

注意:

當(dāng) oldnode 被替換時，所有與之相關(guān)的屬性內(nèi)容都將被移除。
newnode 必須先被建立。

**replaceWith()**方法使用參數(shù)節(jié)點(diǎn)，替換當(dāng)前節(jié)點(diǎn)。參數(shù)可以是元素節(jié)點(diǎn)，也可以是文本節(jié)點(diǎn)。

var span = document.createElement('span');
el.replaceWith(span);

上面代碼中，el節(jié)點(diǎn)將被span節(jié)點(diǎn)替換。

克隆節(jié)點(diǎn)

cloneNode() 方法可以克隆節(jié)點(diǎn)，克隆出的節(jié)點(diǎn)是 “孤兒節(jié)點(diǎn)”。

必須繼續(xù)使用 appendChild() 或 insertBefore() 方法將孤兒節(jié)點(diǎn)插入到 DOM 樹上。

var 孤兒節(jié)點(diǎn) = 老節(jié)點(diǎn).cloneNode();
var 孤兒節(jié)點(diǎn) = 老節(jié)點(diǎn).cloneNode(true);

參數(shù)是一個布爾值，表示是否采用深度克隆：如果為 true，則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也會被克隆，如果為 false，則只克隆該節(jié)點(diǎn)本身。

【小案例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可樂</li>
        </ul>
    </div>
    <div id="box2"></div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];
        // 克隆節(jié)點(diǎn)
        var new_ul = theul.cloneNode(true);
        box2.appendChild(new_ul);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box1">
        <ul>
            <li>牛奶</li>
            <li>咖啡</li>
            <li>可樂</li>
        </ul>
    </div>
    <div id="box2"></div>
    <script>
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var theul = box1.getElementsByTagName('ul')[0];
        // 克隆節(jié)點(diǎn)
        var new_ul = theul.cloneNode(false);
        box2.appendChild(new_ul);
    </script>
</body>
</html>