在本教程中，我们将深入了解如何使用JavaScript操作DOM。通过学习这些高级技巧，您将能够更有效地与网页元素交互。

常用DOM操作

  • 获取元素
    • document.getElementById(id)
    • document.getElementsByClassName(class)
    • document.getElementsByTagName(tag)
  • 更新内容
    • element.innerHTML = newHTML
    • element.textContent = newText
  • 添加元素
    • parentElement.appendChild(newElement)
    • parentElement.insertBefore(newElement, referenceElement)
  • 删除元素
    • parentElement.removeChild(element)
  • 事件监听
    • element.addEventListener(event, function)

实例

假设我们要创建一个简单的点击按钮来改变文本内容的示例。

<button id="myButton">点击我</button>
<p id="myText">这是一个段落。</p>

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("myText").innerHTML = "按钮已被点击！";
});

扩展阅读

如果您想深入了解DOM操作，可以阅读以下教程：

图片示例

JavaScript DOM