操作 DOM（Document Object Model）是 JavaScript 中常见的任务之一，它允许您通过 JavaScript 动态地修改 HTML 页面的内容、结构和样式。以下是一些常见的操作 DOM 的方法：

1. 选择元素：

  • document.getElementById(id)：通过元素的 id 属性选择单个元素。
  • document.getElementsByClassName(className)：通过元素的 class 属性选择一组元素。
  • document.getElementsByTagName(tagName)：通过元素的标签名选择一组元素。
  • document.querySelector(selector)：通过 CSS 选择器选择单个元素。
  • document.querySelectorAll(selector)：通过 CSS 选择器选择一组元素。

2. 操作元素内容和属性：

  • element.innerHTML：获取或设置元素的 HTML 内容。
  • element.textContent：获取或设置元素的文本内容。
  • element.getAttribute(name)：获取元素的指定属性值。
  • element.setAttribute(name, value)：设置或添加元素的属性值。
  • element.style.property：获取或设置元素的 CSS 样式属性。

3. 创建、插入和删除元素：

  • document.createElement(tagName)：创建新的 HTML 元素。
  • parentNode.appendChild(node)：将节点添加为父节点的最后一个子节点。
  • parentNode.insertBefore(newNode, referenceNode)：在父节点的子节点列表中，将 new 节点插入到 reference 节点的前面。
  • parentNode.removeChild(node)：从父节点中移除指定的子节点。

4. 添加事件监听器：

  • element.addEventListener(event, function)：向元素添加事件监听器。
  • element.removeEventListener(event, function)：从元素移除事件监听器。

示例：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>

<div id="container">
    <h1>Hello, DOM!</h1>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

<script>
    // 选择元素
    let container = document.getElementById("container");
    let listItems = document.querySelectorAll("#list li");

    // 操作元素内容和属性
    container.innerHTML += "<p>This is a paragraph.</p>";

    listItems.forEach(item => {
        item.textContent += " (updated)";
    });

    // 创建、插入和删除元素
    let newListItem = document.createElement("li");
    newListItem.textContent = "Item 4";
    document.getElementById("list").appendChild(newListItem);

    let firstListItem = document.querySelector("#list li:first-child");
    let referenceListItem = document.querySelector("#list li:nth-child(2)");
    let newListItem2 = document.createElement("li");
    newListItem2.textContent = "Item 0";
    document.getElementById("list").insertBefore(newListItem2, referenceListItem);

    document.getElementById("list").removeChild(firstListItem);

    // 添加事件监听器
    container.addEventListener("click", () => {
        console.log("Container clicked!");
    });

    listItems.forEach(item => {
        item.addEventListener("click", () => {
            console.log(item.textContent + " clicked!");
        });
    });
</script>

</body>
</html>

 

这个示例演示了如何使用 JavaScript 操作 DOM，包括选择元素、操作内容和属性、创建、插入和删除元素以及添加事件监听器。通过使用这些方法，您可以实现丰富且交互性强的网页应用程序。