Migrating from jsdom to htmlparser2

import { JSDOM } from 'jsdom';

const dom = new JSDOM(html);
const document = dom.window.document;

// document is a browser Document object

import { parseDocument } from 'htmlparser2';

const document = parseDocument(html);

// document is a plain JS object:
// { type: 'root', children: [ … ] }

// Single element (or null)
document.querySelector('.nav-link')
document.querySelector('#main')
document.querySelector('a[href^="https"]')

// All matching elements (NodeList)
document.querySelectorAll('ul > li')
document.querySelectorAll('[data-id]')

// Classic helpers
document.getElementById('main')
document.getElementsByClassName('card')
document.getElementsByTagName('p')

import { selectOne, selectAll } from 'css-select';

// Single element (or null)
selectOne('.nav-link', document)
selectOne('#main', document)
selectOne('a[href^="https"]', document)

// All matching elements (plain Array)
selectAll('ul > li', document)
selectAll('[data-id]', document)

// ID / class / tag — just use selectors:
selectOne('#main', document)
selectAll('.card', document)
selectAll('p', document)

// No native way to compile/reuse a selector.
// Every call re-parses the selector string.
rows.forEach(row => {
  const cell = row.querySelector('td.price');
});

import { compile, selectOne } from 'css-select';

// Compile once, reuse many times (faster in loops)
const priceCell = compile('td.price');

rows.forEach(row => {
  const cell = selectOne(priceCell, row);
});

element.matches('.active')
element.matches('a[href]')

import { is } from 'css-select';

is(node, '.active')
is(node, 'a[href]')

// Read
el.getAttribute('href')       // '/about' or null
el.id                         // shorthand for id attr
el.className                  // shorthand for class attr

// Check
el.hasAttribute('disabled')   // true/false

// Write
el.setAttribute('href', '/new')
el.removeAttribute('disabled')

// Iterate all attrs
for (const attr of el.attributes) {
  console.log(attr.name, attr.value);
}

// Read — direct object access
el.attribs['href']                    // '/about' or undefined
el.attribs['id']
el.attribs['class']

// or with domutils (returns undefined, not null)
domutils.getAttributeValue(el, 'href')

// Check
domutils.hasAttrib(el, 'disabled')    // true/false
'disabled' in el.attribs              // same thing

// Write — mutate the object directly
el.attribs['href'] = '/new'
delete el.attribs['disabled']

// Iterate all attrs
Object.entries(el.attribs).forEach(([name, value]) => {
  console.log(name, value);
});

// All text, recursively (equivalent to textContent)
el.textContent

// Rendered text — layout-aware, skips hidden elements
// (browser only, not really useful in jsdom either)
el.innerText

// Text node's raw string value
textNode.nodeValue   // or textNode.data or textNode.textContent

// All text, recursively — equivalent to textContent
domutils.getText(node)

// There is no innerText equivalent. That's a browser concept.
// domutils.getText is what you want.

// Text node's raw string value
textNode.data

// Get only direct text node children
// NodeList has no .filter() — spread it first
[...el.childNodes]
  .filter(n => n.nodeType === Node.TEXT_NODE)
  .map(n => n.textContent)
  .join('')

// Get only direct text node children
el.children
  .filter(n => n.type === 'text')
  .map(n => n.data)
  .join('')

// Parent
el.parentElement    // element parent or null
el.parentNode       // any node parent (incl. document)

// Children — ELEMENTS only (HTMLCollection)
el.children
el.firstElementChild
el.lastElementChild

// Children — ALL nodes incl. text (NodeList)
el.childNodes
el.firstChild
el.lastChild

// Siblings — elements only
el.nextElementSibling
el.previousElementSibling

// Siblings — any node
el.nextSibling
el.previousSibling

// Tag name (UPPERCASE)
el.tagName    // 'DIV'

// Parent
el.parent     // any node parent (null at root)
domutils.getParent(el)  // same thing

// Children — ALL nodes (text, comments, elements)
el.children
el.children.find(domutils.isTag)           // first element child
[...el.children].reverse().find(domutils.isTag) // last element child

// Children — ELEMENTS only
el.children.filter(domutils.isTag)
domutils.getChildren(el).filter(domutils.isTag)

// Siblings — any node
el.next       // next sibling
el.prev       // previous sibling

// Siblings — element only (walk next/prev, skip non-elements)
let n = el.next;
while (n && !domutils.isTag(n)) n = n.next;
// n is nextElementSibling (or null) — see clean helpers below

// Tag name (lowercase)
el.name       // 'div'

node.nodeType === Node.ELEMENT_NODE    // 1
node.nodeType === Node.TEXT_NODE       // 3
node.nodeType === Node.COMMENT_NODE    // 8
node.nodeType === Node.DOCUMENT_NODE   // 9

node instanceof Element   // is an element
node instanceof Text      // is a text node

domutils.isTag(node)       // type 'tag' | 'script' | 'style'
domutils.isText(node)      // type === 'text'
domutils.isComment(node)   // type === 'comment'
domutils.isDocument(node)  // type === 'root'

// Or check the string directly:
node.type === 'tag'
node.type === 'text'
node.type === 'comment'
node.type === 'root'

el.innerHTML    // content inside the element
el.outerHTML    // element itself + its content

domutils.getInnerHTML(node)    // content inside
domutils.getOuterHTML(node)    // node + content

// Alternative: dom-serializer (more control)
import render from 'dom-serializer';
render(node.children)          // inner HTML
render(node)                   // outer HTML

el.classList.contains('active')
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.replace('old', 'new')

const classes = () =>
  (el.attribs.class || '').split(/\s+/).filter(Boolean);

// contains
classes().includes('active')
// or with css-select (no mutation):
is(el, '.active')   // import { is } from 'css-select'

// add
if (!classes().includes('active'))
  el.attribs.class = [...classes(), 'active'].join(' ');

// remove
el.attribs.class = classes().filter(c => c !== 'active').join(' ');

// toggle
el.attribs.class = classes().includes('active')
  ? classes().filter(c => c !== 'active').join(' ')
  : [...classes(), 'active'].join(' ');

// replace
el.attribs.class = classes().map(c => c === 'old' ? 'new' : c).join(' ');

// Remove a node
el.parentNode.removeChild(el)
// or: el.remove()

// Replace a node
el.parentNode.replaceChild(newNode, el)

// Insert before/after
parent.insertBefore(newNode, refNode)

// Create nodes
document.createElement('div')
document.createTextNode('hello')

// Remove a node (updates parent.children + sibling links)
domutils.removeElement(el)

// Replace a node
domutils.replaceElement(el, newNode)

// Insert as sibling
domutils.prepend(refNode, newNode)   // insert newNode before refNode
domutils.append(refNode, newNode)    // insert newNode after refNode

// Create nodes — use domhandler constructors:
import { Element, Text } from 'domhandler';
const div = new Element('div', { class: 'box' }, []);
const txt = new Text('hello');

parent.appendChild(child);

// Preferred: pass children at construction time
import { Element } from 'domhandler';
const ul = new Element('ul', {}, [li1, li2, li3]);

// Append after the fact — domutils.append() adds a sibling,
// so target the last child. Fall back for empty parent:
const last = parent.children.at(-1);
if (last) {
  domutils.append(last, child);
} else {
  child.parent = parent;
  parent.children.push(child);
}

import { JSDOM } from 'jsdom';

const dom = new JSDOM(xmlString, {
  contentType: 'application/xml',
});
const document = dom.window.document;

// Tag names are case-sensitive and preserved as-is.
// Malformed XML produces a parseerror document.

import { parseDocument } from 'htmlparser2';

const doc = parseDocument(xmlString, { xmlMode: true });

// xmlMode changes three things:
//   1. Tag names are preserved as-is (no lowercasing)
//   2. Self-closing tags (<br/>, <MyTag/>) are honoured
//   3. No implicit HTML structure (no <html>/<body> injection)