FauxDOM

!Build Status 

A fast and lightweight JavaScript library for parsing, modifying, and outputting HTML using a (mostly) standard DOM API, either on the server in Node.js or in any reasonably modern browser.

Description

FauxDOM is meant to parse HTML the same way browsers do, while also being as fast as possible. Some compromises were made for performance reasons that make FauxDOM treat some less-than-valid HTML different from a standards-compliant browser. With this in mind, any major structural differences between what FauxDOM produces and what a browser produces should be safe to view as a problem with the HTML document itself. However, if you come across a scenario where you believe FauxDOM is incorrect, and this same issue hasn't been reported yet, feel free to open a new issue.

Having a mostly standards-compliant DOM API means that some parts of FauxDOM's implementation of the standards fully work, while others either don't or are different in some regard. The documentation will list properties and methods as either standard, semi-standard (when their behaviour is different from the standard), or non-standard to give you a more clear idea of how FauxDOM differs from the standard DOM API.

$3

- Standards-based API

FauxDOM implements a subset of the standard DOM API as defined by the WHATWG, and documented by MDN.

The full list of supported API methods and properties can be found in the documentation.

- Selector engine

The main portion of the Selectors Level 4 API that can be used to identify elements has been implemented and is used by Node.closest(), Node.matches(), Node.querySelector(), and Node.querySelectorAll().

The full list of supported selectors can be found in the selectors documentation.

$3

- Namespaces

HTML namespaces in general are not supported by FauxDOM. Any standard DOM API methods that end in "NS" are not implemented, and any other methods that should work with namespaces according to the spec will simply ignore any requests to work on namespaces.

Namespaces in selectors (for Node.querySelector(), etc.), in addition to not being supported, will actually cause a syntax error to be thrown.

- Attribute nodes

While FauxDOM fully supports attributes on elements, attribute values are only ever worked with as strings rather than attribute node objects. As such, any standard DOM API methods that work with attribute nodes (eg. createAttribute(), getAttributeNode(), setAttributeNode(), etc.) are not implemented.

- Element adoption

For performance reasons, FauxDOM doesn't implement what the WHATWG's HTML 5 spec calls the adoption agency algorithm, instead opting for a significantly more simplistic method of determining which elements can be the children of which other elements when parsing HTML.

$3

- Array-like objects

For many standard DOM API methods that would normally work with a collection of values using an Array-like object (such as NamedNodeMap and NodeList), FauxDOM instead simply uses an Array to store the values. The main exception to this is DOMTokenList, accessible from Node.classList, which is a mostly complete implementation of the standard DOM API class of the same name.

Installing

$3

``sh
npm install fauxdom
`

$3

For client-side use, FauxDOM comes in three distinct flavours:

1. fauxdom.zip — Old-school everything-lives-in-the-global-scope style

Including this in your page will result in a single class called DOM being globally defined.

2. fauxdom.legacy.zip — Like above, but for older browsers

Just like the first option, but it's been made compatible with older browsers (IE 9 and similar).

3. fauxdom.module.zip — Way-of-the-future ES module style

The module exports a single class named DOM.

Download the latest release in the style you want.

entities.zip and entities.module.zip are also available to download if you want to be able to encode and decode the entire set of HTML entities as defined by the HTML 5 standard. Please see the note about the standard set of entities if you intend to use the full set.

Using

In Node.js, as is usual, you'll need to require() FauxDOM to use it:

`javascript
const DOM = require( "fauxdom" );
`

For use on a webpage, include fauxdom.js before code that uses FauxDOM:

`html


`

FauxDOM can also be used as an ES module by importing the module's single export DOM:

`javascript
import DOM from "/fauxdom.js";
`

Once the DOM class is accessible by your code, you're ready to start creating and working with documents. The DOM reference documentation is an excellent place to start reading about how to use FauxDOM.

Examples

As a simple example of making an empty document be slightly more meaningful, the following code:

`javascript
const document = new DOM( "" );

document.title = "Page";

const header = document.createElement( "h1" );
header.textContent = "Hello, world.";
document.body.appendChild( header );

console.log( document.innerHTML );
`

will output (with whitespace added for readability):

`html








Hello, world.

`javascript
const html = "'+ (21 * 2) +'