hast-util-from-dom
Advanced tools
The `hast-util-from-dom` package is a utility for converting DOM nodes to HAST (Hypertext Abstract Syntax Tree) nodes. This is particularly useful for working with HTML content in a structured and programmatic way, enabling transformations, analysis, and rendering of HTML content.
Convert DOM to HAST
This feature allows you to convert a DOM node to a HAST node. In this example, we use `jsdom` to create a DOM from an HTML string and then convert a paragraph element to a HAST node.
const { fromDom } = require('hast-util-from-dom');
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><p>Hello world</p>');
const hast = fromDom(dom.window.document.querySelector('p'));
console.log(hast);The `rehype-parse` package is used to parse HTML into a HAST tree directly from an HTML string. Unlike `hast-util-from-dom`, which converts existing DOM nodes to HAST, `rehype-parse` works directly with HTML strings and is part of the unified collective of tools for processing content.
hast utility to transform from a DOM tree.
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
npm:
npm install hast-util-from-dom
This utility is similar to hast-util-from-parse5, but
is intended for browser use and therefore relies on the native DOM API instead
of an external parsing library.
Say we have the following file, example.html:
<!doctype html><title>Hello!</title><h1 id="world">World!<!--after--><script src="example.js" charset="UTF-8"></script>
Suppose example.js is a bundled version of something like this:
import {inspect} from 'unist-util-inspect'
import {fromDom} from 'hast-util-from-dom'
const hast = fromDom(document)
console.log(inspect.noColor(hast))
Viewing example.html in a browser should yield the following in the console:
root[2]
├─ doctype [name="html"]
└─ element[2] [tagName="html"]
├─ element[1] [tagName="head"]
│ └─ element[1] [tagName="title"]
│ └─ text: "Hello!"
└─ element[1] [tagName="body"]
└─ element[3] [tagName="h1"][properties={"id":"world"}]
├─ text: "World!"
├─ comment: "after"
└─ element[0] [tagName="script"][properties={"src":"example.js","charSet":"UTF-8"}]
This package exports the following identifiers: fromDom.
There is no default export.
fromDom(node)Transform a DOM tree to a hast tree.
This works in a similar way to the parse5 version
except that it works directly from the DOM rather than a string of HTML.
Consequently, it does not maintain positional info.
Use of hast-util-from-dom can open you up to a
cross-site scripting (XSS) attack if the DOM is unsafe.
Use hast-util-santize to make the hast tree safe.
hast-util-from-parse5
— Create a hast tree from Parse5’s ASThast-util-sanitize
— Sanitize hast nodeshast-util-to-html
— Create an HTML stringhast-util-to-dom
— Create a DOM tree from a hast treeSee contributing.md in syntax-tree/.github for ways to get
started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.
FAQs
hast utility to create a tree from the DOM
We found that hast-util-from-dom demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.