@parse5/tools

A set of tools for interacting with and manipulating a parse5 AST.

Why?

The parse5 tree adapter architecture can make AST types, traversal and manipulation difficult due to its customisability.

This package introduces some assumptions (i.e. removes some customisability) in order to provide a more trivial interface to the parse5 AST for the common use case.

Due to this, the types in various places are also simplified and improved.

Tools

Node creation

The default parse5 adapter is usually enough to create the nodes you need.

To make some use cases a little easier, the following do exist, though:

• createElement(tagName[, attrs[, namespaceURI]])
  • The attributes can be an array (e.g. [{name: 'foo', value: 'bar'}]) or an object (e.g. {foo: 'bar'})
• createTextNode(value)
• createCommentNode(value)
• createDocument()
• createDocumentFragment()
• createTemplateNode([content])
  • The content must be a DocumentFragment if it is set

Node removal

The default parse5 adapter can already remove nodes. For ease of use, we also expose a function here:

• removeNode(node)

Node type guards

A full set of node type guard functions are availabile:

• isDocument
• isDocumentFragment
• isTemplateNode
• isElementNode
• isCommentNode
• isDocumentTypeNode
• isTextNode

Each of these consumes a Node and acts as a TypeScript type guard:

1if (isDocument(node)) {
2  // access document-specific properties
3}

Parent/child type guards

These help with determining if a given node can have children, or can be a child.

• isChildNode
• isParentNode

These too are TypeScript type guards:

1if (isChildNode(node)) {
2  // interact with node.parentNode
3}
4
5if (isParentNode(node)) {
6  // interact with node.childNodes
7}

Child manipulation

If you need to mutate a child:

• replaceWith(node, ...replacements) - replaces a given node with one or more nodes
• spliceChildren(node, start, deleteCount[, ...children]) - splices the children of a node just the same as Array#splice

Attributes

For interacting with and mutating attributes of an element:

• setAttribute(node, name, value)
• getAttribute(node, name)
• hasAttribute(node, name)
• removeAttribute(node, name)
• getAttributeIndex(node, name)

Text manipulation

For dealing with text content of nodes:

• getTextContent(node)
• setTextContent(node, str)

Traversal

Unless otherwise specified, all traversal functions are depth first.

Additionally, all capable of returning multiple nodes are iterators.

query(node, condition)

From a given node, this queries for a child at any depth which matches the condition.

For example, to find the first document fragment:

1query(
2  node,
3  (node) => isDocumentFragment(node)
4);

queryAll(node[, condition])

From a given node, this queries for all children at any depth which match the condition.

For example, to find all elements:

1const elements = query(
2  node,
3  (node) => isElementNode(node)
4);
5
6for (const element of elements) {
7  // do something
8}

ancestors(node)

Discovers all parents of the specified node until the root document.

walkChildren(node)

Discovers all children of the specified node, depth-first.

previousSiblings(node)

Discovers all previous siblings of the specified node.

nextSiblings(node)

Discovers all next siblings of the specified node.

traverse

The traverse function allows you to specify a visitor which will be called for each matching type encountered while traversing the tree depth-first.

For example:

1traverse(node, {
2  text: (textNode) => {
3    // do something with a text node
4  }
5});

Each node type can have a visitor (e.g. you could have an element function).

pre:node

There is one special visit function: pre:node.

This is called before visiting any node and will prevent traversing into the current node's children if it returns false.

For example:

1traverse(node, {
2  'pre:node': (node) => {
3    return isElement(node);
4  }
5});

This example would traverse into the children of only element nodes as all others would have returned false.