doma
Parse an HTML string into
DocumentFragment
or oneElement
, in a few bytes (in browser or jsdom)
Install
npm install doma
Setup
// This module is only offered as a ES Module
import doma from 'doma';
Usage
doma('<h1>Cats</h1> and dogs');
//=> DocumentFragment[<h1>, Text(' and dogs')]
doma('the cow');
//=> DocumentFragment[Text('the cow')]
doma.one('beautiful <i>bird</i>');
//=> <i>
doma.one('wild animal');
//=> null
More examples
Example: AJAXed page
Note: script
tags are not executed, but other on*
handlers will run normally once attached to the document.
const response = await fetch('page.html');
const html = await response.text();
const dom = doma(html);
const ajaxedContent = dom.querySelector('#ajax-container').childNodes;
const ajaxedContainer = document.querySelector('#ajax-container');
ajaxedContainer.append(...ajaxedContent);
Example: Parse images from HTML
Note: images are not fetched when the HTML is parsed. The elements only become "active" (and start loading) once appended to the document.
const html = 'They say it’s round <img src="earth.jpg"> but actually it’s banana-shaped <img src="banana.tiff">';
const dom = doma(html);
// => DocumentFragment[Text('They say it’s round '), <img>, Text(' but actually it’s banana-shaped ', <img>]
const images = dom.querySelectorAll('img');
// => NodeList[<img>, <img>]
Example: Drop HTML tags from string
const html = '<em>Never</em> gonna give you <sup>up</sup>, never gonna let you <sub>down</sub>';
const string = doma(html).textContent;
// => 'Never gonna give you up, never gonna let you down'
Related
-
select-dom - Lightweight
querySelector
/All
wrapper that outputs an Array. - delegate-it - DOM event delegation, in <1KB.
- Refined GitHub - Uses this module.
License
MIT © Federico Brigante