Examples & Recipes
Real-world examples and recipes for using dawm in common scenarios.
Basic HTML Parsing
Parse an HTML string and interact with the DOM:
import { parseHTML } from "dawm";
const doc = parseHTML(`
<!doctype html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello, world!</h1>
<p class="intro">Welcome to dawm.</p>
</body>
</html>
`);
console.log(doc.title); // "My Page"
console.log(doc.body.firstElementChild); // <h1> elementQuerying Elements
Use familiar CSS selectors to find elements:
import { parseHTML } from "dawm";
const doc = parseHTML(`
<ul id="list">
<li class="item">First</li>
<li class="item active">Second</li>
<li class="item">Third</li>
</ul>
`);
// querySelector
const active = doc.querySelector(".active");
console.log(active?.textContent); // "Second"
// querySelectorAll
const items = doc.querySelectorAll(".item");
console.log(items.length); // 3
// getElementById
const list = doc.getElementById("list");
console.log(list?.tagName); // "UL"
// getElementsByClassName
const allItems = doc.getElementsByClassName("item");
console.log(allItems.length); // 3Manipulating the DOM
Add, remove, and modify elements:
import { parseHTML } from "dawm";
const doc = parseHTML("<div id='app'></div>");
const app = doc.getElementById("app")!;
// Create and append elements
const p = doc.createElement("p");
p.textContent = "Created with dawm!";
app.appendChild(p);
console.log(app.innerHTML); // "<p>Created with dawm!</p>"Working with Attributes
Read and modify element attributes:
import { parseHTML } from "dawm";
const doc = parseHTML('<a href="https://dawm.dev" class="link" data-id="42">dawm</a>');
const link = doc.querySelector("a")!;
console.log(link.getAttribute("href")); // "https://dawm.dev"
console.log(link.classList.contains("link")); // true
console.log(link.dataset.id); // "42"
link.setAttribute("target", "_blank");
link.classList.add("external");XML Parsing
Parse and traverse XML documents:
import { parseDocument } from "dawm";
const xml = `<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<book id="1">
<title>The Rust Programming Language</title>
<author>Steve Klabnik</author>
</book>
<book id="2">
<title>Programming TypeScript</title>
<author>Boris Cherny</author>
</book>
</catalog>`;
const doc = parseDocument(xml, "application/xml");
const books = doc.getElementsByTagName("book");
for (const book of books) {
const title = book.getElementsByTagName("title")[0]?.textContent;
console.log(title);
}
// "The Rust Programming Language"
// "Programming TypeScript"HTML Serialization
Serialize a DOM tree back to an HTML string:
import { parseHTML } from "dawm";
import { XMLSerializer } from "dawm/serialize";
const doc = parseHTML("<div><p>Hello</p></div>");
const serializer = new XMLSerializer();
console.log(doc.body.innerHTML);
// "<div><p>Hello</p></div>"
console.log(serializer.serializeToString(doc));
// Full document serializationWeb Scraping Pattern
Extract structured data from HTML:
import { parseHTML } from "dawm";
async function scrapeProducts(html: string) {
const doc = parseHTML(html);
const cards = doc.querySelectorAll(".product-card");
return Array.from(cards).map((card) => ({
name: card.querySelector(".product-name")?.textContent?.trim(),
price: card.querySelector(".product-price")?.textContent?.trim(),
url: card.querySelector("a")?.getAttribute("href"),
}));
}SSR (Server-Side Rendering)
Use dawm as a lightweight DOM for server-side rendering:
import { parseHTML } from "dawm";
function renderPage(data: { title: string; content: string }) {
const doc = parseHTML(`
<!doctype html>
<html>
<head><title></title></head>
<body>
<main></main>
</body>
</html>
`);
doc.title = data.title;
const main = doc.querySelector("main")!;
main.innerHTML = data.content;
return doc.documentElement.outerHTML;
}Using with DOMParser
dawm provides a standards-compliant DOMParser class:
import { DOMParser } from "dawm";
const parser = new DOMParser();
const doc = parser.parseFromString(
"<div>Hello from DOMParser</div>",
"text/html"
);
console.log(doc.body.firstElementChild?.textContent);
// "Hello from DOMParser"Fragment Parsing
Parse HTML fragments without creating a full document:
import { parseFragment } from "dawm/parse";
const frag = parseFragment("<li>One</li><li>Two</li><li>Three</li>", "ul");
console.log(frag.childNodes.length); // 3
frag.childNodes.forEach((node) => {
console.log(node.textContent);
});
// "One", "Two", "Three"