en/docs/javascript-dom-tutorial

JavaScript DOM 教程

本教程将带您了解如何使用 JavaScript 操作 HTML DOM。您将学习如何选择元素、修改属性、添加事件监听器以及更多高级技巧。

选择元素

首先，我们需要选择页面上的元素。以下是一些常用的选择器：

• getElementById()：通过 ID 选择元素。
• getElementsByClassName()：通过类名选择元素。
• getElementsByTagName()：通过标签名选择元素。

例如，要选择 ID 为 "myElement" 的元素，可以使用以下代码：

var element = document.getElementById("myElement");

修改属性

选择元素后，我们可以修改其属性。以下是一些常用的属性：

• innerHTML：获取或设置元素的 HTML 内容。
• innerText：获取或设置元素的文本内容。
• value：获取或设置表单元素的值。

例如，要修改元素的文本内容，可以使用以下代码：

element.innerText = "Hello, world!";

添加事件监听器

事件监听器允许我们在元素上执行特定的操作。以下是如何添加事件监听器的示例：

element.addEventListener("click", function() {
  alert("元素被点击了！");
});

扩展阅读

如果您想了解更多关于 JavaScript DOM 的内容，可以阅读我们的 JavaScript DOM 进阶教程。

JavaScript DOM