Project: syntax-tree/hast-util-from-dom

Package: hast-util-from-dom@4.0.1

  1. Dependents: 7
  2. hast utility to create a tree from the DOM
  1. util 143
  2. utility 139
  3. unist 127
  4. html 121
  5. rehype 85
  6. hast 72
  7. hast-util 46
  8. dom 9


Build Coverage Downloads Size Sponsors Backers Chat

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 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)


Viewing example.html in a browser should yield the following in the console:

├─ 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.


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.


See 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.


ISC © Keith McKnight