anodum v2.0.0
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); // result => true
In Browser
<script>
var result = Anodum.isNode(document); // result => true
</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"; // or anodum.copyElementAttributes if using in browser
const sourceNode = document.createElement('div');
const targetNode = document.createElement('div');
sourceNode.setAttribute('class', 'container');
sourceNode.setAttribute('id', 'my-div');
copyElementAttributes(sourceNode, targetNode);
// tragetNode.getAttribute('id') => 'my-div'
// tragetNode.getAttribute('class') => 'container'
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"; // or anodum.getClosestScrollableElement if using in browser
const element = document.createElement('div');
const scrollableElement = getClosestScrollableElement(element); // scrollableElement => document
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"; // or anodum.getElementHeight if using in browser
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); // height => 80px
getNodeByTreePath(rootNode, path)
Looks for an element inside rootNode
by related tree path path
.
import { getNodeByTreePath } from "anodum"; // or anodum.getNodeByTreePath if using in browser
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);
// node.nodeType => 3 (#text)
// node.textContent => target
getTreePathOfNode(node, rootNode)
Calculates a tree path of target node
.
rootNode
- is an optional parameter that sets the root element relative to which the path is calculated
import { getTreePathOfNode } from "anodum"; // or anodum.getTreePathOfNode if using in browser
const element = document.createElement('div');
element.innerHTML = 'text<p>inner text</p>';
const path = getTreePathOfNode(element.lastChild.firstChild);
// path => [0, 1, 0]
hasNonEmptyPseudoElements(element)
Checks if element
has the :before
or :after
elements with non-empty content
property.
import { hasNonEmptyPseudoElements } from "anodum"; // or anodum.hasNonEmptyPseudoElements if using in browser
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); // result => true
hasNonEmptyShallowTextNodes(element)
Checks if element
has a non-empty direct text child node.
import { hasNonEmptyShallowTextNodes } from "anodum"; // or anodum.hasNonEmptyShallowTextNodes if using in browser
const element = document.createElement('div');
element.innerHTML = 'text';
const result = hasNonEmptyShallowTextNodes(element); // result => true
isAttributeNode(node)
Check if node
is an AttributeNode
import { isAttributeNode } from "anodum"; // or anodum.isAttributeNode if using in browser
const node = document.createAttribute('name');
const result = isAttributeNode(node); // result => true
isChildOfElement(node, testElement)
Checks if node
is a child of target testElement
import { isChildOfElement } from "anodum"; // or anodum.isChildOfElement if using in browser
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); // result => true
isChildOfTag(node, testTag)
Checks if node
is a child of an element with target testTag
import { isChildOfTag } from "anodum"; // or anodum.isChildOfTag if using in browser
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'); // result => true
isCommentNode(node)
Checks if node
is a CommentNode
import { isCommentNode } from "anodum"; // or anodum.isCommentNode if using in browser
const node = document.createComment('content');
const result = isCommentNode(node); // result => true
isConditionalCommentNode(node)
Checks if node
is a conditional CommentNode
import { isConditionalCommentNode } from "anodum"; // or anodum.isConditionalCommentNode if using in browser
const container = document.createElement('div');
container.innerHTML = '<![if expression]> HTML <![endif]>';
const node = container.firstChild;
const result = isConditionalComment(node); // result => true
isDocumentFragmentNode(node)
Checks if node
is a DocumentFragmentNode
import { isDocumentFragmentNode } from "anodum"; // or anodum.isDocumentFragmentNode if using in browser
const node = document.createDocumentFragment();
const result = isDocumentFragmentNode(node); // result => true
isDocumentNode(node)
Checks if node
is a DocumentNode
import { isDocumentNode } from "anodum"; // or anodum.isDocumentNode if using in browser
const result = isDocumentNode(document); // result => true
isDocumentTypeNode(node)
Checks if node
is a DocumentTypeNode
import { isDocumentTypeNode } from "anodum"; // or anodum.isDocumentTypeNode if using in browser
const node = document.doctype;
const result = isDocumentTypeNode(node); // result => true
isElementNode(node)
Checks if node
is a ElementNode
import { isElementNode } from "anodum"; // or anodum.isElementNode if using in browser
const node = document.createElement('div');
const result = isElementNode(node); // result => true
isEmbedElement(node)
Checks if node
is a embed element. More details here
import { isEmbedElement } from "anodum"; // or anodum.isEmbedElement if using in browser
const node = document.createElement('video');
const result = isEmbedElement(node); // result => true
isHeadingElement(node)
Checks if node
is a heading element. More details here
import { isHeadingElement } from "anodum"; // or anodum.isHeadingElement if using in browser
const node = document.createElement('h1');
const result = isHeadingElement(node); // result => true
isInteractiveElement(node)
Checks if node
is an interactive element. More details here
import { isInteractiveElement } from "anodum"; // or anodum.isInteractiveElement if using in browser
const node = document.createElement('a');
const result = isInteractiveElement(node); // result => true
isNestingAllowed(element, containerElement)
Checks if nesting element
into containerElement
is valid in terms of html specs. More details here
import { isNestingAllowed } from "anodum"; // or anodum.isNestingAllowed if using in browser
const containerElement = document.createElement('button');
const element = document.createElement('div');
const result = isNestingAllowed(element, containerElement); // result => false
isNode(node)
Checks if node
is a Node.
import { isNode } from "anodum"; // or anodum.isNode if using in browser
const result = isNode(document); // result => true
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
import { isNonEmptyTextNode } from "anodum"; // or anodum.isNode if using in browser
const node = document.createTextNode('text');
const result = isNonEmptyTextNode(node); // result => true
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
import { isNonEmptyTextNode } from "anodum"; // or anodum.isNode if using in browser
const node = document.createTextNode('text');
const result = isNonEmptyTextNode(node); // result => true
isOneOfTags(element)
Checks if element
matches to one of the specified tags.
import { isOneOfTags } from "anodum"; // or anodum.isOneOfTags if using in browser
const element = document.createElement('div');
const result = isOneOfTags(element, ['h1', 'div'); // result => true
isPhrasingElement(element)
Checks if element
is a phrasing Element. More details here
import { isPhrasingElement } from "anodum"; // or anodum.isPhrasingElement if using in browser
const element = document.createElement('cite');
const result = isPhrasingElement(element); // result => true
isProcessingInstructionNode(node)
Checks if node
is a ProcessingInstructionNode.
import { isProcessingInstructionNode } from "anodum"; // or anodum.isProcessingInstructionNode if using in browser
const node = document.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"');
const result = isProcessingInstructionNode(node); // result => true
isRenderedNode(node)
Checks if node
is rendered.
import { isRenderedNode } from "anodum"; // or anodum.isRenderedNode if using in browser
const result = isRenderedNode(document.body); // result => true
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); // true
isSameOrContains(element, element2); // false
element.appendChild(element2);
isSameOrContains(element, element2); // true
isSectioningElement(element)
Checks if element
is a sectioning element. More details here
import { isSectioningElement } from "anodum"; // or anodum.isSectioningElement if using in browser
const element = document.createElement('section');
const result = isSectioningElement(element); // result => true
isSelfClosingElement(element)
Checks if element
is a self-closing element.
import { isSelfClosingElement } from "anodum"; // or anodum.isSelfClosingElement if using in browser
const element = document.createElement('img');
const result = isSelfClosingElement(element); // result => true
isTag(element, testTag)
Checks if element
matches to specified testTag
.
import { isTag } from "anodum"; // or anodum.isTag if using in browser
const element = document.createElement('img');
const result = isTag(element, 'img'); // result => true
isTextNode(node)
Checks if node
is a TextNode.
import { isTextNode } from "anodum"; // or anodum.isTextNode if using in browser
const node = document.createTextNode('');
const result = isTextNode(node); // result => true
isValidSelector(cssSelector)
Checks if cssSelector
is valid.
import { isValidSelector } from "anodum"; // or anodum.isValidSelector if using in browser
const result = isValidSelector('div'); // result => true
mergeSiblingTextNodes(node)
Merges all sibling text nodes into single one
import { mergeSiblingTextNodes } from "anodum"; // or anodum.mergeSiblingTextNodes if using in browser
const html = 'hello';
const dom = domParser.parseFromString(html, 'text/html');
dom.body.appendChild(document.createTextNode('world'));
mergeSiblingTextNodes(dom.body.firstChild);
// dom.body.childNodes.length => 1
// dom.body.childNodes[0].textContent => 'helloworld'
normalizeHTML(html)
Removes/Replaced unmaintainable symbols from target html string
import { normalizeHTML } from "anodum"; // or anodum.normalizeHTML if using in browser
const html = '\n\n\n<div> test\u202F</div>\t\t\t';
const result = normalizeHTML(html); // result => '<div> test </div>'
parseDocumentFromString(html, removeComments)
Parses target html
string into Document model. If removeComments
is true, all non-conditional comments will be
removed.
import { parseDocumentFromString } from "anodum"; // or anodum.parseDocumentFromString if using in browser
const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';
const dom = parseDocumentFromString(html);
// dom.title => 'test'
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"; // or anodum.parseElementFromString if using in browser
const html = '<div></div>';
const element = parseElementFromString(html);
// element.tagName => 'DIV'
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"; // or anodum.removeSetOfNodes if using in browser
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);
// nodes[0].parentNode => null
// dom.body.childNodes.length => 1
// dom.body.childNodes[0].textContent => 'helloworld'
serializeDocument(document)
Serializes target document
into html string.
import { serializeDocument } from "anodum"; // or anodum.serializeDocument if using in browser
const html = '<html class="example"></html>';
const dom = domParser.parseFromString(html, 'text/html');
const result = serializeDocument(dom);
// result => '<html class="example"><head><title></title></head><body></body></html>'
serializeDocumentType(document)
Serializes doctype of target document
into html string.
import { serializeDocumentType } from "anodum"; // or anodum.serializeDocumentType if using in browser
const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';
const dom = domParser.parseFromString(html, 'text/html');
const result = serializeDocumentType(dom); // result => '<!DOCTYPE html>'
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"; // or anodum.traverseNode if using in browser
const element = document.createElement('div');
element.innerHTML = '<section><!--comment--><h1></h1></section>text';
traverseNode(element, (node, path) => {
// First callback call
// node => section
// path => [0]
}, true);
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago