unified

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

Package:hast-util-from-dom@2.0.1

  1. Dependencies:2·Dependents:2
  2. hast utility to create a tree from the DOM
  1. hast 78
  2. rehype 76
  3. util 63
  4. utility 61
  5. html 55
  6. unist 45
  7. dom 8

hast-util-from-dom

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to transform from a DOM tree.

Install

yarn:

yarn add hast-util-from-dom

npm:

npm install hast-util-from-dom

Usage

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"}]

API

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.

Contribute

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, organisation, or community you agree to abide by its terms.

License

ISC © Keith McKnight