JavaScript DOM 是 Web 开发中的一个重要部分，它允许开发者直接在浏览器中操作 HTML 和 CSS。以下是一些基础概念和用法：

选择元素

你可以使用多种方式来选择 DOM 中的元素，例如：

  • 使用 getElementById() 选择 ID 为特定值的元素。
  • 使用 getElementsByClassName() 选择具有特定类名的元素。
  • 使用 getElementsByTagName() 选择具有特定标签名的元素。

操作元素

选择到元素后，你可以进行以下操作：

  • 修改元素的文本内容：element.textContent 或 element.innerText
  • 修改元素的样式：element.style.property = value
  • 添加或删除元素：parent.appendChild(child) 或 parent.removeChild(child)

事件监听

JavaScript DOM 允许你为元素添加事件监听器：

element.addEventListener('click', function() {
  // 处理点击事件
});

示例：动态更改页面内容

假设我们有一个按钮，当点击时，页面上的段落内容会改变。

<button id="changeText">点击更改内容</button>
<p id="text">这是原始内容。</p>

document.getElementById('changeText').addEventListener('click', function() {
  var textElement = document.getElementById('text');
  textElement.textContent = '内容已更改！';
});

JavaScript DOM 示例

扩展阅读

想要了解更多关于 JavaScript DOM 的内容，可以阅读 MDN Web Docs。

希望这能帮助你更好地理解 JavaScript DOM！🚀