JavaScript 和 DOM 简介

JavaScript 是一种广泛使用的编程语言，主要用于网页开发。它允许我们与网页进行交互，创建动态效果，并使网页更加生动和互动。而 DOM（文档对象模型）则是浏览器用来解析和展示 HTML 和 XML 文档的内部结构。

什么是 DOM？

DOM 是一个跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在网页中，DOM 表示为一系列的节点，每个节点对应于 HTML 或 XML 文档中的一个元素。

DOM 节点类型

• 元素节点：对应于 HTML 元素，如 <div>、<p> 等。
• 文本节点：包含元素内的文本内容。
• 属性节点：对应于元素的属性，如 <div id="myDiv"> 中的 id 属性。
• 注释节点：包含注释内容。

使用 JavaScript 操作 DOM

JavaScript 提供了丰富的 API 来操作 DOM。以下是一些常用的操作：

• 获取元素：使用 document.getElementById()、document.querySelector() 等。
• 修改元素内容：使用 element.innerHTML、element.textContent 等。
• 修改元素样式：使用 element.style。
• 添加或删除元素：使用 element.appendChild()、element.removeChild() 等。

示例：动态更改文本内容

以下是一个简单的示例，演示如何使用 JavaScript 动态更改文本内容：

// 获取元素
var element = document.getElementById("myElement");

// 修改文本内容
element.textContent = "这是新的文本内容！";

在上面的代码中，我们首先通过 getElementById() 方法获取了 ID 为 myElement 的元素，然后使用 textContent 属性将元素的文本内容更改为 "这是新的文本内容！"。你可以在这个 示例页面 上尝试运行这段代码。

总结

JavaScript 和 DOM 是网页开发中不可或缺的组成部分。通过学习这些技术，你可以创建出更加丰富和互动的网页。希望这篇简介能帮助你更好地理解这些概念。