本页内容

使用 deno-dom 与 Deno

deno-dom 是 Deno 中 DOM 和 HTML 解析器的实现。它使用 Rust（通过 Wasm）和 TypeScript 实现。还存在一个“原生”实现，利用 FFI 接口。

deno-dom 旨在符合规范，例如 jsdom，与 LinkeDOM 不同。目前，deno-dom 在解析数据结构方面比 LinkeDOM 慢，但在某些操作方面更快。deno-dom 和 LinkeDOM 都比 jsdom 快得多。

从 deno_dom v0.1.22-alpha 开始支持在 Deno Deploy 上运行。因此，如果您想要严格的标准一致性，请考虑使用 deno-dom 而不是 LinkeDOM。

基本示例 跳转到标题

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

import { DOMParser } from "https://deno.land/x/deno_dom/deno-dom-wasm.ts";
import { assert } from "https://deno.land/[email protected]/assert/mod.ts";

const document = new DOMParser().parseFromString(
  `<!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>`,
  "text/html",
);

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

console.log(h1.textContent);

注意：此示例使用来自 deno_land/x 的未固定版本，您可能不希望这样做，因为版本可能会发生变化并导致意外结果。您应该使用可用的最新版本 deno-dom。

更快的启动 跳转到标题

只需导入 deno-dom-wasm.ts 文件即可通过顶级 await 启动 Wasm 代码。问题是顶级 await 会阻塞模块加载过程。特别是对于大型 Wasm 项目，在模块加载完成后初始化 Wasm 会更高效。

deno-dom 为此提供了解决方案，他们提供了库的替代版本，该版本不会自动初始化 Wasm，并且需要您在代码中进行初始化。

import {
  DOMParser,
  initParser,
} from "https://deno.land/x/deno_dom/deno-dom-wasm-noinit.ts";

(async () => {
  // initialize when you need it, but not at the top level
  await initParser();

  const doc = new DOMParser().parseFromString(
    `<h1>Lorem ipsum dolor...</h1>`,
    "text/html",
  );
})();

此外，使用 deno-dom-native.ts（需要 --allow-ffi 标志）将绕过 Wasm 启动惩罚，并且不需要 init() 启动时间。这仅适用于 Deno CLI，而不适用于 Deploy。