hast-util-from-dom
!Buildbuild-badgebuild
!Coveragecoverage-badgecoverage
!Downloadsdownloads-badgedownloads
!Sizesize-badgesize
!Sponsorssponsors-badgecollective
!Backersbackers-badgecollective
!Chatchat-badgechathast utility to transform from a DOM tree.
Contents
* [`fromDom(tree, options?)`](#fromdomtree-options)
* [`AfterTransform`](#aftertransform)
* [`Options`](#options)
What is this?
This package is a utility that takes a DOM tree (from the actual DOM or from things likejsdom
jsdom) as input and turns it into a hast (HTML)
syntax tree.When should I use this?
You can use this project when you want to use hast in browsers. This package is very small, but it does so by:- …not providing positional information
- …potentially yielding varying results in different (especially older)
browsers
The hast utility hast-util-to-dom
hast-util-to-dom does the inverse of this
utility.
It turns hast into a DOM tree.The rehype plugin
rehype-dom-parse
rehype-dom-parse wraps this utility to
parse HTML with DOM APIs.Install
This package is ESM onlyesm. In Node.js (version 16+), install with npm:npm install hast-util-from-dom
In Deno with
esm.sh
esmsh:import {fromDom} from 'https://esm.sh/hast-util-from-dom@5'
In browsers with
esm.sh
esmsh:<script type="module">
import {fromDom} from 'https://esm.sh/hast-util-from-dom@5?bundle'
</script>
Use
Say our pageexample.html
looks as follows:<!doctype html>
<title>Example</title>
<body>
<main>
<h1>Hi</h1>
<p><em>Hello</em>, world!</p>
</main>
<script type="module">
import {fromDom} from 'https://esm.sh/hast-util-from-dom@4?bundle'
const hast = fromDom(document.querySelector('main'))
console.log(hast)
</script>
Now running
open example.html
prints the following to the console:{type: "element", tagName: "main", properties: {}, children: Array}
API
This package exports the identifierfromDom
api-from-dom.
There is no default export.fromDom(tree, options?)
Transform a DOM tree to a hast tree.Parameters
— DOM tree to transform
options
(Options
api-options, optional)
— configuration
Returns
Equivalent hast node (HastNode
hast-node).AfterTransform
Callback called when each node is transformed (TypeScript type).Parameters
— DOM node that was handled
— corresponding hast node
Returns
Nothing.Options
Configuration (TypeScript type).Fields
afterTransform
(AfterTransform
api-after-transform, optional)
— callback called when each node is transformed
Returns
HastNode
hast-node.Types
This package is fully typed with TypeScript. It exports the additional typesAfterTransform
api-after-transform and
Options
api-options.Compatibility
Projects maintained by the unified collective are compatible with maintained versions of Node.js.When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line,
hast-util-from-dom@^5
,
compatible with Node.js 16.Security
Use ofhast-util-from-dom
itself is safe but see other utilities for more
information on potential security problems.Contribute
Seecontributing.md
contributing in syntax-tree/.github
health for
ways to get started.
See support.md
support for ways to get help.This project has a code of conductcoc. By interacting with this repository, organisation, or community you agree to abide by its terms.
Related
— parse hast from a string of HTML
— sanitize hast nodes
— serialize hast as HTML
— create DOM trees from hast