标签世界之旅：DOM基本操作点亮HTML标签的魅力

HTML 的迷人世界：用 DOM 点亮交互之光

踏入 HTML 的世界，犹如进入一座色彩缤纷的乐园，标签如同一个个积木，构筑起网页的丰富多彩。而 DOM（文档对象模型）则是掌控这些积木的魔杖，让我们赋予它们生命力，让用户与之互动。

标准属性：标签的天然标识

标准属性是标签与生俱来的特征，就好比它们的身份证，包含了它们的基本信息和功能。例如，disabled、checked 和 selected 属性，分别控制着表单元素的禁用状态、选中状态和选项状态。这些属性可以直接使用点语法来操作，简单易用。

// 禁用一个按钮
document.getElementById("myButton").disabled = true;

// 选中一个复选框
document.getElementById("myCheckbox").checked = true;

// 选中一个下拉框选项
document.getElementById("mySelect").selectedIndex = 1;

自定义属性：标签的个性化定制

在 HTML5 中，data-自定义属性为标签提供了更强大的定制能力。data-属性在标签上均以 data- 开头，在 DOM 对象上则以 dataset. 对象形式获取。我们可以根据自己的需要，为标签添加各种自定义属性，例如：

// 为一个标签添加自定义属性
document.getElementById("myDiv").setAttribute("data-my-attribute", "my-value");

// 获取一个标签的自定义属性
let myAttribute = document.getElementById("myDiv").dataset.myAttribute;

自定义属性的使用场景非常广泛，我们可以用来：

• 存储与标签相关的数据，方便后续操作和处理。
• 动态控制标签的样式和行为，实现更灵活的交互效果。
• 在不修改 HTML 代码的情况下，为标签添加额外信息，便于维护和扩展。

DOM 操作：点亮标签的交互之光

有了标准属性和自定义属性的加持，我们就可以使用 DOM 操作来点亮标签的交互之光。DOM 操作允许我们动态地修改标签的属性、内容和样式，实现各种各样的交互效果。例如：

// 修改标签的文本内容
document.getElementById("myParagraph").innerHTML = "Hello World!";

// 修改标签的样式
document.getElementById("myDiv").style.color = "red";

// 添加一个事件监听器
document.getElementById("myButton").addEventListener("click", function() {
  alert("Button clicked!");
});

这些操作如同魔法棒，让标签不再是静态的文本，而是充满活力和交互性的元素，让用户能够与网页进行互动，获得更丰富的体验。

探索 DOM 基本操作，犹如踏上一段标签世界之旅。你将领略到标签的魅力，发现 DOM 操作的强大，并能够轻松操控标签，为你的网页设计注入更多动态感和用户友好性。

常见问题解答

• 什么是 DOM？
  DOM（文档对象模型）是一种编程接口，它将网页表示为一个层次结构的数据模型，允许我们使用 JavaScript 动态地修改和操作网页内容。

• 如何获取 DOM 对象？
  我们可以通过 document.getElementById()、document.querySelector() 和 document.querySelectorAll() 等方法来获取 DOM 对象。

• 如何修改标签的属性？
  可以使用点语法（例如，myElement.style.color = "red"）或 setAttribute() 方法来修改标签的属性。

• 如何添加一个事件监听器？
  可以使用 addEventListener() 方法为标签添加事件监听器，当事件触发时执行特定的函数。

• 如何删除一个 DOM 元素？
  可以使用 removeChild() 方法从父元素中删除一个 DOM 元素。