Test
123
456
'); dom.find(':not(p)').forEach(el => el.strip()); // Render console.log(dom.toString()); ``` #### HML and XML There are currently two input formats supported, HTML and XML fragments. By default we use a very relaxed custom parser that will try to make sense of whatever tag soup you hand it. In HTML mode, all tags and attribute names are lowercased and selectors need to be lowercase as well. ```js // HTML const dom = new DOM('Hello World!
'); // XML const dom = new DOM('Hello World!
');
// Render `DOM` object to HTML
const html = dom.toString();
// Create a new `DOM` object with one HTML tag
const div = DOM.newTag('div', {class: 'greeting'}, 'Hello World!');
```
Navigate the DOM tree with and without CSS selectors.
```js
// Find one element matching the CSS selector and return it as `DOM` object
const div = dom.at('div > p');
// Find all elements marching the CSS selector and return them as `DOM` objects
const divs = dom.find('div > p');
// Get root element as `DOM` object (document or fragment node)
const root = dom.root();
// Get parent element as `DOM` object
const parent = dom.parent();
// Get all ancestor elements as `DOM` objects
const ancestors = dom.ancestors();
const ancestors = dom.ancestors('div > p');
// Get all child elements as `DOM` objects
const children = dom.children();
const children = dom.children('div > p');
// Get all sibling elements before this element as `DOM` objects
const preceding = dom.preceding();
const preceding = dom.preceding('div > p');
// Get all sibling elements after this element as `DOM` objects
const following = dom.following();
const following = dom.following('div > p');
// Get sibling element before this element as `DOM` objects
const previous = dom.previous();
// Get sibling element after this element as `DOM` objects
const next = dom.next();
```
Extract information and manipulate elements.
```js
// Check if element matches the given CSS selector
const isDiv = dom.matches('div > p');
// Extract text content from element
const greeting = dom.text();
const greeting = dom.text({recursive: true});
// Get element tag
const tag = dom.tag;
// Set element tag
dom.tag = 'div';
// Get element attribute value
const class = dom.attr.class;
// Set element attribute value
dom.attr.class = 'whatever';
// Remove element attribute
delete dom.attr.class;
// Get element attribute names
const names = Object.keys(dom.attr);
// Get element's rendered content
const content = dom.content();
// Get form value
const formValue = dom.at('input').val();
const formValue = dom.at('option').val();
const formValue = dom.at('select').val();
const formValue = dom.at('textarea').val();
const formValue = dom.at('button').val();
// Find this element's namespace
const namespace = dom.namespace();
// Get a unique CSS selector for this element
const selector = dom.selector();
// Remove element and its children
dom.remove();
// Remove element but preserve its children
dom.strip();
// Replace element and its children
dom.replace('Hello World!
'); // Replace this element's content dom.replaceContent('Hello World!
'); // Append HTML/XML fragment after this element dom.append('Hello World!
'); // Append HTML/XML fragment to this element's content dom.appendContent('Hello World!
'); // Prepend HTML/XML fragment before this element dom.prepend('Hello World!
'); // Prepend HTML/XML fragment to this element's content dom.prependContent('Hello World!
'); // Wrap HTML/XML fragment around this element dom.wrap(''); // Wrap HTML/XML fragment around the content of this element dom.wrapContent(''); ``` There is also a node level API that you can for example use to extend the `DOM` class. It is however still in flux, and therefore not fully documented yet. ```js // Remove comment nodes that are children of this element dom.currentNode.childNodes .filter(node => node.nodeType === '#comment') .forEach(node => node.detach()); // Extract text surrounding this element const text = dom.currentNode.parentNode.childNodes .filter(node => node.nodeType === '#text') .map(node => node.value) .join(''); ``` #### Custom Parsers Additional input formats, such as fully spec compliant HTML5 documents can be supported with custom parsers. There is a [parse5](https://www.npmjs.com/package/parse5) based [example included in this distribution](https://github.com/mojolicious/dom.js/blob/main/test/support/parse5.js) that we use for testing. ```js import DOM, {DocumentNode, FragmentNode} from '@mojojs/dom'; // Minimal custom HTML/XML parser that only creates the document/fragment objects class Parser { parse(text) { return new DocumentNode(); } parseFragment(text) { return new FragmentNode(); } } // Parse HTML with a custom parser const dom = new DOM('Hello World!
', {parser: new Parser()}); ``` ## Installation All you need is Node.js 16.0.0 (or newer). ``` $ npm install @mojojs/dom ``` ## Support If you have any questions the documentation might not yet answer, don't hesitate to ask in the [Forum](https://github.com/mojolicious/mojo.js/discussions), on [Matrix](https://matrix.to/#/#mojo:matrix.org), or [IRC](https://web.libera.chat/#mojo).