在 Deno 中使用 deno-dom

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/std@0.220.0/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 上運作。

在 Deno 中使用 deno-dom

基本範例​

更快的啟動​

基本範例

更快的啟動