JavaScript DOM操作怎樣進(jìn)行節(jié)點(diǎn)操作

小樊
81
2024-10-24 18:49:40

在JavaScript中，可以使用DOM（文檔對(duì)象模型）操作來(lái)對(duì)HTML文檔中的節(jié)點(diǎn)進(jìn)行增、刪、改、查等操作。以下是一些常用的DOM操作方法：

  1. 獲取節(jié)點(diǎn)：

    • getElementById(id)：通過(guò)元素的ID獲取元素。
    • getElementsByClassName(className)：通過(guò)元素的類名獲取元素集合。
    • getElementsByTagName(tagName)：通過(guò)元素的標(biāo)簽名獲取元素集合。
    • querySelector(selector)：通過(guò)CSS選擇器獲取第一個(gè)匹配的元素。
    • querySelectorAll(selector)：通過(guò)CSS選擇器獲取所有匹配的元素集合。

  2. 創(chuàng)建節(jié)點(diǎn)：

    • document.createElement(tagName)：創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)。
    • document.createTextNode(text)：創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。

  3. 插入節(jié)點(diǎn)：

    • parentNode.insertBefore(newNode, referenceNode)：將新節(jié)點(diǎn)插入到指定節(jié)點(diǎn)之前。
    • parentNode.appendChild(newNode)：將新節(jié)點(diǎn)添加到指定節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。

  4. 刪除節(jié)點(diǎn)：

    • parentNode.removeChild(childNode)：從DOM中刪除指定節(jié)點(diǎn)。

  5. 替換節(jié)點(diǎn)：

    • parentNode.replaceChild(newChild, oldChild)：用新節(jié)點(diǎn)替換指定節(jié)點(diǎn)。

  6. 復(fù)制節(jié)點(diǎn)：

    • Node.cloneNode(deep)：復(fù)制指定節(jié)點(diǎn)，可以選擇是否復(fù)制子節(jié)點(diǎn)。

  7. 移動(dòng)節(jié)點(diǎn)：

    • parentNode.insertBefore(node, referenceNode)：將指定節(jié)點(diǎn)移動(dòng)到指定節(jié)點(diǎn)之前。

以下是一個(gè)簡(jiǎn)單的示例，演示了如何使用DOM操作在HTML文檔中添加一個(gè)新的<p>元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作示例</title>
</head>
<body>
    <div id="container"></div>
    <button onclick="addParagraph()">添加段落</button>

    <script>
        function addParagraph() {
            // 創(chuàng)建一個(gè)新的<p>元素
            const newParagraph = document.createElement('p');
            // 創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)
            const textNode = document.createTextNode('這是一個(gè)新的段落。');
            // 將文本節(jié)點(diǎn)添加到<p>元素中
            newParagraph.appendChild(textNode);
            // 獲取id為"container"的元素
            const container = document.getElementById('container');
            // 將新創(chuàng)建的<p>元素添加到id為"container"的元素中
            container.appendChild(newParagraph);
        }
    </script>
</body>
</html>

在這個(gè)示例中，當(dāng)用戶點(diǎn)擊"添加段落"按鈕時(shí)，會(huì)調(diào)用addParagraph函數(shù)，該函數(shù)會(huì)創(chuàng)建一個(gè)新的<p>元素，并添加到id為"container"的元素中。

0 踩