Anodum
Another Document utils library
Overview
How to Install
Using NPM
In order to use Anodum with NPM simply call:
npm install --save anodum
In Browser
In order to use Anodum directly in browser simply download this repository and copy dist/anodum.js into your project.
Next, include it on your .html page:
<script src="path/to/your/js/anodum.js"></script>
Get Started
You are able to use Anodum as the importable npm package or directly in browser.
In Node.js
import { isNode } from "anodum";
const result = isNode(document);
In Browser
<script>
var result = Anodum.isNode(document);
</script>
Constants
Anodum exports a small set of predefined constants eg.
domParser
xmlSerializer
nodeTypes
You are able to use them as well as any of API methods bellow.
API
copyElementAttributes(element, targetElement)
Copies all attributes of element
into targetElement
. Existing targetElement
attributes will be overwritten.
import { copyElementAttributes } from "anodum";
const sourceNode = document.createElement('div');
const targetNode = document.createElement('div');
sourceNode.setAttribute('class', 'container');
sourceNode.setAttribute('id', 'my-div');
copyElementAttributes(sourceNode, targetNode);
getClosestScrollableElement(rootNode, useClientHeight)
Get the closest element that has a scrollable area. If useClientHeight
is set to false, function doesn't compare
element's scrollHeight and clientHeight. Default value is true.
import { getClosestScrollableElement } from "anodum";
const element = document.createElement('div');
const scrollableElement = getClosestScrollableElement(element);
getElementHeight(element, includeMargins)
Calculates element
height. If includeMargins
is set to true the final value will include top and bottom margins
import { getElementHeight } from "anodum";
const element = document.createElement('div');
document.body.appendChild(element);
element.style.height = '40px';
element.style.marginTop = '20px';
element.style.marginBottom = '20px';
const height = getElementHeight(element);
getNodeByTreePath(rootNode, path)
Looks for an element inside rootNode
by related tree path path
.
import { getNodeByTreePath } from "anodum";
const path = [0, 1, 1, 0];
const rootNode = document.createElement('div');
rootNode.innerHTML = 'text<div><h1></h1><p>target</p></div>';
const node = getNodeByTreePath(rootNode, path);
getTreePathOfNode(node)
Calculates a tree path of target node
.
import { getTreePathOfNode } from "anodum";
const element = document.createElement('div');
element.innerHTML = 'text<p>inner text</p>';
const path = getTreePathOfNode(element.lastChild.firstChild);
hasNonEmptyPseudoElements(element)
Checks if element
has the :before
or :after
elements with non-empty content
property.
import { hasNonEmptyPseudoElements } from "anodum";
const element = document.createElement('div');
const style = document.createElement('style');
style.innerHTML = 'div:before { content: "true" }';
document.body.appendChild(style);
document.body.appendChild(element);
const result = hasNonEmptyPseudoElements(element);
hasNonEmptyShallowTextNodes(element)
Checks if element
has a non-empty direct text child node.
import { hasNonEmptyShallowTextNodes } from "anodum";
const element = document.createElement('div');
element.innerHTML = 'text';
const result = hasNonEmptyShallowTextNodes(element);
isAttributeNode(node)
Check if node
is an AttributeNode
import { isAttributeNode } from "anodum";
const node = document.createAttribute('name');
const result = isAttributeNode(node);
isChildOfElement(node, testElement)
Checks if node
is a child of target testElement
import { isChildOfElement } from "anodum";
const highLevelContainer = document.createElement('section');
const container = document.createElement('div');
const node = document.createElement('div');
highLevelContainer.appendChild(container);
container.appendChild(node);
const result = isChildOfElement(node, highLevelContainer);
isChildOfTag(node, testTag)
Checks if node
is a child of an element with target testTag
import { isChildOfTag } from "anodum";
const highLevelContainer = document.createElement('section');
const container = document.createElement('div');
const node = document.createElement('div');
highLevelContainer.appendChild(container);
container.appendChild(node);
const result = isChildOfTag(node, 'section');
Checks if node
is a CommentNode
import { isCommentNode } from "anodum";
const node = document.createComment('content');
const result = isCommentNode(node);
Checks if node
is a conditional CommentNode
import { isConditionalCommentNode } from "anodum";
const container = document.createElement('div');
container.innerHTML = '<![if expression]> HTML <![endif]>';
const node = container.firstChild;
const result = isConditionalComment(node);
isDocumentFragmentNode(node)
Checks if node
is a DocumentFragmentNode
import { isDocumentFragmentNode } from "anodum";
const node = document.createDocumentFragment();
const result = isDocumentFragmentNode(node);
isDocumentNode(node)
Checks if node
is a DocumentNode
import { isDocumentNode } from "anodum";
const result = isDocumentNode(document);
isDocumentTypeNode(node)
Checks if node
is a DocumentTypeNode
import { isDocumentTypeNode } from "anodum";
const node = document.doctype;
const result = isDocumentTypeNode(node);
isElementNode(node)
Checks if node
is a ElementNode
import { isElementNode } from "anodum";
const node = document.createElement('div');
const result = isElementNode(node);
isEmbedElement(node)
Checks if node
is a embed element. More details here
import { isEmbedElement } from "anodum";
const node = document.createElement('video');
const result = isEmbedElement(node);
isHeadingElement(node)
Checks if node
is a heading element. More details here
import { isHeadingElement } from "anodum";
const node = document.createElement('h1');
const result = isHeadingElement(node);
isInteractiveElement(node)
Checks if node
is an interactive element. More details here
import { isInteractiveElement } from "anodum";
const node = document.createElement('a');
const result = isInteractiveElement(node);
isNestingAllowed(element, containerElement)
Checks if nesting element
into containerElement
is valid in terms of html specs. More details here
import { isNestingAllowed } from "anodum";
const containerElement = document.createElement('button');
const element = document.createElement('div');
const result = isNestingAllowed(element, containerElement);
isNode(node)
Checks if node
is a Node.
import { isNode } from "anodum";
const result = isNode(document);
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
import { isNonEmptyTextNode } from "anodum";
const node = document.createTextNode('text');
const result = isNonEmptyTextNode(node);
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
import { isNonEmptyTextNode } from "anodum";
const node = document.createTextNode('text');
const result = isNonEmptyTextNode(node);
isOneOfTags(element)
Checks if element
matches to one of the specified tags.
import { isOneOfTags } from "anodum";
const element = document.createElement('div');
const result = isOneOfTags(element, ['h1', 'div');
isPhrasingElement(element)
Checks if element
is a phrasing Element. More details here
import { isPhrasingElement } from "anodum";
const element = document.createElement('cite');
const result = isPhrasingElement(element);
isProcessingInstructionNode(node)
Checks if node
is a ProcessingInstructionNode.
import { isProcessingInstructionNode } from "anodum";
const node = document.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
const result = isProcessingInstructionNode(node);
isRenderedNode(node)
Checks if node
is rendered.
import { isRenderedNode } from "anodum";
const result = isRenderedNode(document.body);
isSameOrContains(element, testElement)
Checks if element
and testElement
it the same element, or element
contains testElement
.
const element = document.createElement('div');
const element2 = document.createElement('div');
isSameOrContains(element, element);
isSameOrContains(element, element2);
element.appendChild(element2);
isSameOrContains(element, element2);
isSectioningElement(element)
Checks if element
is a sectioning element. More details here
import { isSectioningElement } from "anodum";
const element = document.createElement('section');
const result = isSectioningElement(element);
isSelfClosingElement(element)
Checks if element
is a self-closing element.
import { isSelfClosingElement } from "anodum";
const element = document.createElement('img');
const result = isSelfClosingElement(element);
isTag(element, testTag)
Checks if element
matches to specified testTag
.
import { isTag } from "anodum";
const element = document.createElement('img');
const result = isTag(element, 'img');
isTextNode(node)
Checks if node
is a TextNode.
import { isTextNode } from "anodum";
const node = document.createTextNode('');
const result = isTextNode(node);
isValidSelector(cssSelector)
Checks if cssSelector
is valid.
import { isValidSelector } from "anodum";
const result = isValidSelector('div');
mergeSiblingTextNodes(node)
Merges all sibling text nodes into single one
import { mergeSiblingTextNodes } from "anodum";
const html = 'hello';
const dom = domParser.parseFromString(html, 'text/html');
dom.body.appendChild(document.createTextNode('world'));
mergeSiblingTextNodes(dom.body.firstChild);
normalizeHTML(html)
Removes/Replaced unmaintainable symbols from target html string
import { normalizeHTML } from "anodum";
const html = '\n\n\n<div> test\u202F</div>\t\t\t';
const result = normalizeHTML(html);
Parses target html
string into Document model. If removeComments
is true, all non-conditional comments will be
removed.
import { parseDocumentFromString } from "anodum";
const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';
const dom = parseDocumentFromString(html);
parseElementFromString(html)
Parses target html
string into ElementNode. html
should contain a single root element, otherwise a TypeError
will be thrown.
import { parseElementFromString } from "anodum";
const html = '<div></div>';
const element = parseElementFromString(html);
removeSetOfNodes(nodes)
Removes a set of nodes from their direct parents. After removal all sibling text nodes will be merge into single one in
order to prevent issues with contenteditable
attr.
import { removeSetOfNodes } from "anodum";
const html = '<p>paragraph1</p>hello';
const dom = domParser.parseFromString(html, 'text/html');
const nodes = [
dom.querySelector('p'),
];
dom.body.appendChild(document.createTextNode('world'));
removeSetOfNodes(nodes);
serializeDocument(document)
Serializes target document
into html string.
import { serializeDocument } from "anodum";
const html = '<html class="example"></html>';
const dom = domParser.parseFromString(html, 'text/html');
const result = serializeDocument(dom);
serializeDocumentType(document)
Serializes doctype of target document
into html string.
import { serializeDocumentType } from "anodum";
const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';
const dom = domParser.parseFromString(html, 'text/html');
const result = serializeDocumentType(dom);
traverseNode(node, onStep, includePath)
Walks trough all descendants of target node recursively. Provides specific element on each callback step.
If includePath
is true returns a path of target node as a second parameter.
import { traverseNode } from "anodum";
const element = document.createElement('div');
element.innerHTML = '<section><!--comment--><h1></h1></section>text';
traverseNode(element, (node, path) => {
}, true);