diff --git a/examples/_data.ts b/examples/_data.ts index 067f72505..910ffb440 100644 --- a/examples/_data.ts +++ b/examples/_data.ts @@ -555,6 +555,13 @@ export const items = [ category: "Web standard APIs", }, + { + title: "Parse HTML with DOMParser", + href: "/examples/html_parsing_tutorial/", + type: "tutorial", + category: "Web standard APIs", + }, + // Standard library { title: "User Data Processing with Deno Collections", diff --git a/examples/_pages/examples_test.ts b/examples/_pages/examples_test.ts index e7d1ee92f..a508c1ae7 100644 --- a/examples/_pages/examples_test.ts +++ b/examples/_pages/examples_test.ts @@ -14,7 +14,9 @@ function unstableFlags(run: string | undefined): string[] { async function typecheck(args: string[]): Promise { return await new Deno.Command(Deno.execPath(), { - args: ["check", ...args], + // Typecheck without evaluating the examples. This follows the runtime + // type-checking path, which supports Deno-specific module types. + args: ["test", "--no-run", ...args], }).output(); } diff --git a/examples/tutorials/html_parsing.md b/examples/tutorials/html_parsing.md new file mode 100644 index 000000000..f786056c2 --- /dev/null +++ b/examples/tutorials/html_parsing.md @@ -0,0 +1,73 @@ +--- +last_modified: 2026-07-16 +title: "Parse HTML with DOMParser" +description: "Learn why DOMParser is not a Deno global and how to parse and query HTML with LinkeDOM or Deno DOM." +url: /examples/html_parsing_tutorial/ +--- + +Deno supports many Web Platform APIs, but it is a server-side runtime rather +than a browser rendering engine. As a result, browser document APIs such as +`window`, `document`, and `DOMParser` are not available as globals. + +When you need to parse and query HTML, use a DOM implementation such as +[LinkeDOM](https://github.com/WebReflection/linkedom) or +[Deno DOM](https://github.com/b-fuze/deno-dom). + +## Parse HTML with LinkeDOM + +LinkeDOM provides a lightweight DOM-like implementation for server-side HTML +parsing and rendering. Import its `DOMParser` from npm: + +```ts title="parse_html.ts" +import { DOMParser } from "npm:linkedom"; + +const response = await fetch("https://example.com/"); +const html = await response.text(); + +const document = new DOMParser().parseFromString(html, "text/html"); +const heading = document.querySelector("h1"); + +console.log(heading?.textContent); // "Example Domain" +``` + +Run the script with network access: + +```sh +deno run --allow-net parse_html.ts +``` + +The returned document supports familiar APIs such as `querySelector`, +`querySelectorAll`, `textContent`, and `innerHTML`. + +## Parse HTML with Deno DOM + +Deno DOM is another option designed specifically for Deno. Its default JSR +package uses a WebAssembly parser: + +```ts title="parse_html.ts" +import { DOMParser } from "jsr:@b-fuze/deno-dom"; + +const html = ` +
+

Hello from Deno

+ Read the docs +
+`; + +const document = new DOMParser().parseFromString(html, "text/html"); +const link = document.querySelector("a"); + +console.log(link?.textContent); // "Read the docs" +console.log(link?.getAttribute("href")); // "/docs" +``` + +This example parses an in-memory string, so it does not require additional +runtime permissions: + +```sh +deno run parse_html.ts +``` + +Neither library turns Deno into a full browser or executes scripts embedded in +the parsed document. For pages that require client-side JavaScript before their +content is available, use a browser automation tool instead.