和我一起深入了解 DOM「DOM 编程」

「这是我参与11月更文挑战的第 27 天，活动详情查看：2021最后一次更文挑战」

DOM 编程

动态脚本

script 标签用于向 HTML 中插入 JS 代码。有两种方式：

直接在 script 标签块中编写 js 代码
通过 script 中的 src 属性，引入外部的 JS 脚本文件

引入第三方 js

现在，我们需要在 DOM 中追加引入第三方的 js，以我最常用的 jquery 为例，可以通过如下的 js 来创建一个新的 script 节点，并追加到 head 上：

let script = document.createElement("script");  // ①
script.src = "https://code.jquery.com/jquery-3.1.1.min.js";  // ②
document.head.appendChild(script);  // ③
复制代码

需要注意的是，③ 还未执行的这个时间节点，新定义的 script 节点，还未被添加到 DOM 之上并被解析，因此还不会下载 src 上对应的外部文件

现在，聊聊上一篇文章中提到的 DocumentFragment 标签，这个可以将多次节点变更操作汇聚到 DOM 之外的虚拟节点再一次同步到 DOM 的标签

如图，script 标签在添加到 DocumentFragment 时，并不会触发外部资源的加载，只有当变更操作同步到 DOM 上，DOM 重新渲染后，才会去载入外部的资源

添加 js 代码片段

在之前的一片文章中有提到，对于绝大部分 html 内的元素，都会有 Text 子节点。我们可以定义一个 script 节点，并将需要插入的 js 片段作为 script 的子节点 -- Text 节点的文本值，添加至 DOM 中

动态样式

css 的载入方式也有两种：

通过 link 标签的 href 属性加载外部的样式表
通过 style 标签向 HTML 插入内部样式

引入第三方 CSS

通过创建 link 标签，以及设置必要的属性，然后添加至 head 标签 不同于 script 标签，link 标签和 style 标签只能在 head 标签下，才会被正常解析； script 标签添加到 DOM 中的位置，只是会影响 js 代码的解析顺序

let link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "styles.css";
document.head.appendChild(link);
复制代码

为 HTML 插入 CSS 片段

与插入 js 代码片段一样的思路，待插入的 css 样式，作为 style 标签的文本子节点的值插入

let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
document.head.appendChild(style);
复制代码

通过上述方式添加的 css 样式，DOM 会立即渲染并使用