Lightweight DOM-like HTML node.
HtmlNode can represent an element node, text node, comment node, or another parsed DOM node type. Some operations, such as attributes and class checks, only make sense for element nodes.
NOTE: HtmlNode objects keep the underlying native document alive while they exist.
childNodes: Array<HtmlNode>All child nodes, including element nodes, text nodes and comments.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
const p = doc.querySelector("p");
console.log(p.childNodes.length); // 2children: Array<HtmlNode>Child element nodes only.
Text nodes and comments are skipped.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
const p = doc.querySelector("p");
console.log(p.children.length); // 1
console.log(p.children[0].tagName); // "b"className: stringValue of the class attribute.
For non-element nodes, or elements without a class attribute, this is an empty string.
const doc = utils.ParseHtml("<p class='album featured'>Title</p>");
if (doc) {
const p = doc.querySelector("p");
console.log(p.className); // "album featured"
}firstChild: ?HtmlNodeFirst child node.
Important: this can be a text node or comment, not necessarily an element.
Whitespace-only text nodes are preserved. Use JSON.stringify(node.textContent) while debugging if you need to see line breaks, tabs, and spaces explicitly.
Use children[0] or querySelector when you need an element.
const doc = utils.ParseHtml("<li>text before link <a href='https://example.com'>Link</a></li>");
const li = doc.querySelector("li");
console.log(JSON.stringify(li.firstChild.textContent)); // "text before link "
const a = li.querySelector("a");
console.log(a.getAttribute("href")); // "https://example.com"innerHTML: stringSerialized HTML markup inside this node.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
const p = doc.querySelector("p");
console.log(p.innerHTML); // "Hello <b>world</b>"innerText: stringAlias of textContent.
Since this parser has no browser layout engine, innerText does not emulate CSS visibility, rendered line wrapping, or layout-dependent text extraction.
isElement: booleanWhether this node is an element node.
Element nodes are tags such as <div>, <a>, <p>, <body>.
Text nodes and comments are not element nodes.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
const p = doc ? doc.querySelector("p") : null;
if (p) {
console.log(p.isElement); // true
console.log(p.firstChild ? p.firstChild.isElement : null); // false
}outerHTML: stringSerialized HTML markup of this node itself.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
const p = doc.querySelector("p");
console.log(p.outerHTML); // "<p>Hello <b>world</b></p>"tagName: stringLowercase tag name for element nodes.
For non-element nodes, this is an empty string.
const doc = utils.ParseHtml("<BODY><P>Hello</P></BODY>");
if (doc) console.log(doc.body.tagName); // "body"textContent: stringText content of this node and its descendants.
Whitespace is returned as it exists in parsed text nodes.
const doc = utils.ParseHtml("<p>Hello <b>world</b></p>");
if (doc) {
const p = doc.querySelector("p");
console.log(p ? p.textContent : null); // "Hello world"
}getAttribute(name)Returns an attribute value.
For missing attributes or non-element nodes, returns an empty string.
| Name | Type | Description |
|---|---|---|
name | string | Attribute name. |
string — Attribute value, or empty string.
const doc = utils.ParseHtml("<a href='https://example.com'>Link</a>");
const a = doc.querySelector("a");
console.log(a.getAttribute("href")); // "https://example.com"getElementsByTagName(tagName)Returns all descendant elements with the specified tag name.
Use "*" to return all descendant elements.
| Name | Type | Description |
|---|---|---|
tagName | string | Tag name, for example "a", "div", "section" or "*". |
Array<HtmlNode> — Array of matching nodes. Empty array if nothing matches.
const doc = utils.ParseHtml("<p><a href='https://example.com'>One</a><a href='/two'>Two</a></p>");
const p = doc.querySelector("p");
const links = p.getElementsByTagName("a");
console.log(links.length); // 2hasAttribute(name)Checks whether an element has an attribute.
For non-element nodes, returns false.
| Name | Type | Description |
|---|---|---|
name | string | Attribute name. |
booleanconst doc = utils.ParseHtml("<a href='https://example.com'>Link</a>");
const a = doc.querySelector("a");
console.log(a.hasAttribute("href")); // true
console.log(a.hasAttribute("title")); // falsehasClass(className)Checks whether the element has a CSS class token.
This checks class tokens, not arbitrary substrings.
For example, hasClass("album") matches class="album featured", but not class="album-list".
For non-element nodes, returns false.
| Name | Type | Description |
|---|---|---|
className | string | Class token to check. |
booleanconst doc = utils.ParseHtml("<li class='album featured'>Title</li>");
const li = doc.querySelector("li");
console.log(li.hasClass("album")); // true
console.log(li.hasClass("featured")); // true
console.log(li.hasClass("album-list")); // falsequerySelector(selector)Returns the first descendant element matching a CSS selector.
| Name | Type | Description |
|---|---|---|
selector | string | CSS selector. |
?HtmlNode — First matching node, or null if nothing matches.
const doc = utils.ParseHtml("<li>text <a href='https://example.com'>Link</a></li>");
const li = doc.querySelector("li");
const a = li.querySelector("a[href]");
if (a) {
console.log(a.getAttribute("href")); // "https://example.com"
}querySelectorAll(selector)Returns all descendant elements matching a CSS selector.
The returned value is a regular JavaScript array.
| Name | Type | Description |
|---|---|---|
selector | string | CSS selector. |
Array<HtmlNode> — Array of matching nodes. Empty array if nothing matches.
const doc = utils.ParseHtml("<ul><li class='album'>A</li><li class='album featured'>B</li></ul>");
const list = doc.querySelector("ul");
const albums = list.querySelectorAll(".album");
console.log(albums.length); // 2