JavaScript 中的 DOM

文档对象模型 (DOM)

DOM API 是一个用于网页文档的编程接口。它表示页面，以便程序可以更改文档的结构、样式和内容。

DOM 将文档表示为对象的树；每个对象代表页面的一部分。

JavaScript 中的 DOM 操作

在 JavaScript 中实现 DOM 时，我们可以考虑以下一些基本知识；

1. 查询选择器 (querySelector)：这是一个贪婪选择器。它选择第一个指定的元素。

例如：

querySelector("h1")

这将定位整个 HTML 文档中的第一个 h1 元素

2. 查询选择器全选 (querySelectorAll)：这将定位 HTML 文档中的所有 h3 元素。

例如：

querySelectorAll("h3")

这些将在控制台中以节点列表的形式输出。

注意：节点列表看起来像数组，但两者有很大区别

节点列表是浏览器 API，而数组是 JavaScript API。 简而言之，节点列表不属于 JavaScript，因此不能在其上实现循环。

此外，getElementbyTagName() 和 querySelectorAll 不是 JavaScript 方法，而是浏览器 API。

innerHTML 和 innerText

建议使用 innerHTML 而非 innerText，因为这样可以限制其他人修改你的脚本。

定位元素的方法

• 我们有很多方法可以定位或选择要在文档中操作的元素。

这些方法包括：

通过 ID 通过名称 通过类 通过标签 通过标签名称

注意：我们绝不使用 ID 和 类 从浏览器中选择任何内容。

因此，我们使用 querySelector。

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 链接 LinkedIn

以上是JavaScript 中的 DOM的详细内容。更多信息请关注PHP中文网其他相关文章！