CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-node-html-parser

A very fast HTML parser, generating a simplified DOM, with basic element query support.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

dom-elements.mddocs/

DOM Elements

Complete HTMLElement implementation providing web-standard DOM manipulation APIs, content modification methods, and comprehensive property access for building and modifying HTML structures programmatically.

Capabilities

HTMLElement Class

Main DOM element class extending Node with complete element manipulation capabilities.

class HTMLElement extends Node {
  // Core properties
  rawTagName: string;
  id: string;
  classList: DOMTokenList;
  rawAttrs: string;
  nodeType: NodeType.ELEMENT_NODE;
  
  // Inherited from Node
  childNodes: Node[];
  parentNode: HTMLElement | null;
  range: readonly [number, number];
}

Tag and Element Information

Properties for accessing element identification and type information.

/** Get/set uppercase tag name */
get tagName(): string;
set tagName(newname: string): void;

/** Get lowercase tag name */
get localName(): string;

/** Check if element is a void element (self-closing) */
get isVoidElement(): boolean;

Usage Examples:

import { parse } from "node-html-parser";

const element = parse('<DIV>content</DIV>').firstChild as HTMLElement;

console.log(element.tagName);     // "DIV"
console.log(element.localName);   // "div"
console.log(element.isVoidElement); // false

// Change tag name
element.tagName = 'SPAN';
console.log(element.toString()); // "<span>content</span>"

Content Properties

Properties for accessing and modifying element text and HTML content.

/** Get raw text content including HTML entities */
get rawText(): string;

/** Get raw text content (alias for rawText) */
get innerText(): string;

/** Get/set decoded text content */
get textContent(): string;
set textContent(val: string): void;

/** Get decoded text content (alias for textContent) */
get text(): string;

/** Get formatted text with block structure and whitespace normalization */
get structuredText(): string;

/** Get/set inner HTML content */
get innerHTML(): string;
set innerHTML(content: string): void;

/** Get complete element HTML including tag */
get outerHTML(): string;

Usage Examples:

const element = parse('<div>Hello <em>world</em>!</div>');

console.log(element.text);           // "Hello world!"
console.log(element.innerHTML);      // "Hello <em>world</em>!"
console.log(element.outerHTML);      // "<div>Hello <em>world</em>!</div>"

// Modify content
element.textContent = "New content";
console.log(element.innerHTML);      // "New content"

element.innerHTML = "<p>Paragraph</p>";
console.log(element.outerHTML);      // "<div><p>Paragraph</p></div>"

Child and Sibling Navigation

Properties for navigating the DOM tree structure.

/** Get all child elements (HTMLElement only, excludes text/comment nodes) */
get children(): HTMLElement[];

/** Get first child node of any type (element, text, comment) */
get firstChild(): Node | undefined;

/** Get last child node of any type (element, text, comment) */
get lastChild(): Node | undefined;

/** Get first child element (HTMLElement only) */
get firstElementChild(): HTMLElement | undefined;

/** Get last child element (HTMLElement only) */
get lastElementChild(): HTMLElement | undefined;

/** Get count of child elements (HTMLElement only) */
get childElementCount(): number;

/** Get next sibling node of any type */
get nextSibling(): Node | null;

/** Get previous sibling node of any type */
get previousSibling(): Node | null;

/** Get next sibling element (HTMLElement only) */
get nextElementSibling(): HTMLElement | null;

/** Get previous sibling element (HTMLElement only) */
get previousElementSibling(): HTMLElement | null;

Usage Examples:

const root = parse('<div><p>First</p><span>Second</span></div>');

console.log(root.children.length);        // 2
console.log(root.firstElementChild.tagName); // "P"
console.log(root.lastElementChild.tagName);  // "SPAN"

const paragraph = root.firstElementChild;
console.log(paragraph.nextElementSibling.tagName); // "SPAN"

DOM Manipulation Methods

Methods for adding, removing, and modifying child elements.

/** Append a child node and return it */
appendChild<T extends Node = Node>(node: T): T;

/** Remove a child node */
removeChild(node: Node): HTMLElement;

/** Replace a child node with another */
exchangeChild(oldNode: Node, newNode: Node): HTMLElement;

/** Append nodes or strings to end of children */
append(...insertable: NodeInsertable[]): void;

/** Prepend nodes or strings to beginning of children */
prepend(...insertable: NodeInsertable[]): void;

/** Insert nodes or strings before this element */
before(...insertable: NodeInsertable[]): void;

/** Insert nodes or strings after this element */
after(...insertable: NodeInsertable[]): void;

/** Replace this element with nodes or strings */
replaceWith(...nodes: (string | Node)[]): HTMLElement;

Usage Examples:

const parent = parse('<div></div>');
const child = parse('<p>Child</p>');

// Add child
parent.appendChild(child);
console.log(parent.innerHTML); // "<p>Child</p>"

// Add multiple children
parent.append('<span>Text</span>', parse('<em>Emphasis</em>'));

// Insert relative to element
const target = parent.querySelector('p');
target.after('<hr>');
target.before('<h1>Title</h1>');

// Replace element
target.replaceWith('<p>New content</p>');

Content Manipulation

Advanced methods for setting content with parsing options.

/** Set content with optional parsing configuration */
set_content(content: string | Node | Node[], options?: Partial<Options>): HTMLElement;

/** Insert HTML at specific position relative to element */
insertAdjacentHTML(where: InsertPosition, html: string): HTMLElement;

InsertPosition values:

  • 'beforebegin' - Before the element
  • 'afterbegin' - Inside the element, before its first child
  • 'beforeend' - Inside the element, after its last child
  • 'afterend' - After the element

Usage Examples:

const element = parse('<div>Original</div>');

// Set content with parsing options
element.set_content('<p>New <em>content</em></p>', {
  comment: true
});

// Insert HTML at positions
element.insertAdjacentHTML('beforebegin', '<header>Header</header>');
element.insertAdjacentHTML('afterend', '<footer>Footer</footer>');
element.insertAdjacentHTML('afterbegin', '<span>Start</span>');
element.insertAdjacentHTML('beforeend', '<span>End</span>');

Utility Methods

Methods for element manipulation and representation.

/** Convert element to HTML string */
toString(): string;

/** Trim content from right using regex pattern */
trimRight(pattern: RegExp): HTMLElement;

/** Remove all whitespace-only text nodes */
removeWhitespace(): HTMLElement;

/** Get visual representation of DOM structure */
get structure(): string;

/** Create deep copy of element */
clone(): Node;

Usage Examples:

const element = parse('<div> <p>Content</p> </div>');

// Get structure visualization
console.log(element.structure);
// div
//   p
//     #text

// Remove whitespace
element.removeWhitespace();
console.log(element.innerHTML); // "<p>Content</p>"

// Clone element
const copy = element.clone();

DOMTokenList Class

Class for managing element class names with standard DOM APIs.

class DOMTokenList {
  /** Number of classes */
  get length(): number;
  
  /** Array of class names */
  get value(): string[];
  
  /** Add class name (throws error if class contains whitespace) */
  add(c: string): void;
  
  /** Remove class name */
  remove(c: string): void;
  
  /** Replace one class with another */
  replace(c1: string, c2: string): void;
  
  /** Toggle class presence */
  toggle(c: string): void;
  
  /** Check if class exists */
  contains(c: string): boolean;
  
  /** Get iterator for class names */
  values(): IterableIterator<string>;
  
  /** Get space-separated class string */
  toString(): string;
}

Usage Examples:

const element = parse('<div class="foo bar">Content</div>');

element.classList.add('baz');
element.classList.remove('foo');
element.classList.toggle('active');

console.log(element.classList.contains('bar')); // true
console.log(element.classList.length);          // 2
console.log(element.classList.toString());      // "bar baz"

Type Definitions

type NodeInsertable = Node | string;
type InsertPosition = 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend';

docs

attributes-properties.md

dom-elements.md

index.md

node-types.md

parsing.md

query-selection.md

tile.json