https://github.com/fregante/doma

Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes (in browser)
https://github.com/fregante/doma

Last synced: 3 days ago
JSON representation

Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes (in browser)

• Host: GitHub
• URL: https://github.com/fregante/doma
• Owner: fregante
• License: mit
• Created: 2019-03-15T05:26:07.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-07-07T16:13:44.000Z (over 1 year ago)
• Last Synced: 2024-10-16T04:01:20.130Z (19 days ago)
• Language: TypeScript
• Size: 19.5 KB
• Stars: 95
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# doma [![npm version](https://img.shields.io/npm/v/doma.svg)][link-npm] [![(size)][badge-gzip]](#no-link)

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/doma.svg?label=gzipped

[link-npm]: https://www.npmjs.com/package/doma

> Parse an HTML string into `DocumentFragment` or one `Element`, in a few bytes (in browser or jsdom)

## Install

```

npm install doma

```

## Setup

```js

// This module is only offered as a ES Module

import doma from 'doma';

```

## Usage

```js

doma('
Cats
 and dogs');

//=>  DocumentFragment[
, Text(' and dogs')]


doma('the cow');

//=>  DocumentFragment[Text('the cow')]

doma.one('beautiful bird');

//=>  


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.

```js

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.

```js

const html = 'They say it’s round  but actually it’s banana-shaped ';

const dom = doma(html);

// =>  DocumentFragment[Text('They say it’s round '), , Text(' but actually it’s banana-shaped ', ]

const images = dom.querySelectorAll('img');

// =>  NodeList[, ]

```

#### Example: Drop HTML tags from string

```js

const html = 'Never gonna give you up, never gonna let you down';

const string = doma(html).textContent;

// =>  'Never gonna give you up, never gonna let you down'

```

## Related

- [select-dom](https://github.com/fregante/select-dom) - Lightweight `querySelector`/`All` wrapper that outputs an Array.

- [delegate-it](https://github.com/fregante/delegate-it) - DOM event delegation, in <1KB.

- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module.

## License

MIT © [Federico Brigante](https://fregante.com)