在 Deno 中使用 jsdom

jsdom 是许多 Web 标准的纯 JavaScript 实现，特别是 WHATWG DOM 和 HTML 标准。其主要目标是全面和符合标准，不特别考虑性能。

如果您对服务器端渲染感兴趣，则 deno-dom 和 LinkeDOM 都是更好的选择。如果您想要在“虚拟”浏览器中运行遵循标准的代码，则 jsdom 可能适合您。

虽然 jsdom 在 Deno CLI 下工作，但它不进行类型检查。这意味着您必须在命令行上使用 --no-check=remote 选项，以避免诊断停止程序的执行。

在编辑器中具有良好的类型设置需要一些工作流程的更改，因为提供 jsdom 类型的方式被声明为具有全局命名模块的全局类型定义，并利用内置 DOM 库的内置类型。

这意味着，如果您想在使用 Deno 语言服务器时在编辑器中获得强类型和智能自动完成，则必须执行一些额外的步骤。

定义 `import_map.json`

您需要将裸导入符号 jsdom 映射到导入版本的 jsdom。这允许 Deno 在指定的方式中正确应用类型到导入。

{
  "jsdom": "https://esm.sh/jsdom"
}

设置配置文件

您需要在工作区的根目录中设置一个名为 deno.jsonc 的配置文件，其中包含 TypeScript 库信息以及指定上面定义的导入映射：

{
  "compilerOptions": {
    "lib": [
      "deno.ns",
      "dom",
      "dom.iterable",
      "dom.asynciterable"
    ]
  },
  "importMap": "./import_map.json"
}

注意：上面我们使用了一个未固定版本的 jsdom。您应该考虑将版本固定为您知道要使用的版本。

基本示例

此示例将取一个测试字符串，将其解析为 HTML 并生成基于它的 DOM 结构。然后，它将查询该 DOM 结构，选择出它遇到的第一个标题，并打印出该标题的文本内容：

import { JSDOM } from "jsdom";
import { assert } from "https://deno.land/std@$STD_VERSION/testing/asserts.ts";

const { window: { document } } = new JSDOM(
  `<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello from Deno</title>
  </head>
  <body>
    <h1>Hello from Deno</h1>
    <form>
      <input name="user">
      <button>
        Submit
      </button>
    </form>
  </body>
</html>`,
  {
    url: "https://example.com/",
    referrer: "https://example.org/",
    contentType: "text/html",
    storageQuota: 10000000,
  },
);

const h1 = document.querySelector("h1");
assert(h1);

console.log(h1.textContent);

在 Deno 中使用 jsdom

定义 import_map.json

设置配置文件

基本示例

定义 `import_map.json`