hast-util-from-dom

hast utility to create a tree from the DOM

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
hast-util-from-dom
5.0.09 months ago6 years agoMinified + gzip package size for hast-util-from-dom in KB

Popular Searches

Readme

hast-util-from-dom
!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
hast 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 like jsdomjsdom) 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-domhast-util-to-dom does the inverse of this utility. It turns hast into a DOM tree.
The rehype plugin rehype-dom-parserehype-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.shesmsh:
import {fromDom} from 'https://esm.sh/hast-util-from-dom@5'

In browsers with esm.shesmsh:
<script type="module">
  import {fromDom} from 'https://esm.sh/hast-util-from-dom@5?bundle'
</script>

Use

Say our page example.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 identifier fromDomapi-from-dom. There is no default export.

fromDom(tree, options?)

Transform a DOM tree to a hast tree.
Parameters
— DOM tree to transform
— configuration
Returns
Equivalent hast node (HastNodehast-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
— callback called when each node is transformed
Returns
HastNodehast-node.

Types

This package is fully typed with TypeScript. It exports the additional types AfterTransformapi-after-transform and Optionsapi-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 of hast-util-from-dom itself is safe but see other utilities for more information on potential security problems.

Contribute

See contributing.mdcontributing in syntax-tree/.githubhealth for ways to get started. See support.mdsupport 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

License

ISClicense © Keith McKnightauthor