知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript 中的 DOM》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

文档对象模型 (DOM)

DOM API 是网页文档的编程接口，它以编程方式呈现页面，允许修改文档结构、样式和内容。DOM 将文档表示为对象树，每个对象代表页面的一部分。

JavaScript 中的 DOM 操作

以下是一些在 JavaScript 中进行 DOM 操作的基础知识：

1. querySelector：这是一个贪婪选择器，它选择匹配指定选择器的第一个元素。

例如：

querySelector("h1")

这将返回整个 HTML 文档中第一个

元素。

2. querySelectorAll：此方法返回匹配指定选择器的所有元素。

例如：

querySelectorAll("h3")

这将返回一个包含所有

元素的 NodeList。

注意：NodeList 看起来像数组，但两者有显著区别。NodeList 是浏览器 API，而数组是 JavaScript API。NodeList 不是 JavaScript 对象，因此不能直接在其上使用数组方法。

此外，getElementById、getElementsByTagName 和 querySelectorAll 都是浏览器 API，而非 JavaScript 方法。

innerHTML 和 innerText

建议优先使用 innerText 而不是 innerHTML，因为这可以限制他人对脚本的修改。

定位元素的方法

有多种方法可以定位或选择文档中要操作的元素，包括：

• 按 ID
• 按名称
• 按类名
• 按标签名

注意：我们不应直接使用 ID 或类名从浏览器中选择元素，而是应该使用 querySelector 或 querySelectorAll。

JavaScript 中的关键概念

a) 提升 (Hoisting)：

例如：

1. console.log(a);
2. var a;
3. a = 5;
4. console.log(a);

在执行期间，第 1 行的 a 将输出 undefined。即使我们没有显式声明 a，它也会在浏览器中被隐式声明，这就是提升。第 4 行的输出将是 5，因为 a 已经被初始化。

b) 闭包 (Closure)：每次创建函数时都会创建一个闭包。

c) 全局执行上下文 (Global Execution Context)：JavaScript 代码不在任何函数内运行的环境。

d) 调用栈 (Call Stack)：当脚本调用函数时，解释器会将其添加到调用栈中，然后开始执行该函数。

我的 GitHub 链接 [链接]

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript 中的 DOM》文章吧，也可关注golang学习网公众号了解相关技术文章。