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:
Get Started
You are able to use Anodum as the importable npm package or directly in browser.
In Node.js
; const result = ; // result => true
In Browser
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.
; // or anodum.copyElementAttributes if using in browser const sourceNode = document;const targetNode = document; sourceNode;sourceNode; ; // 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.
; // or anodum.getClosestScrollableElement if using in browser const element = document; const scrollableElement = ; // scrollableElement => document
getElementHeight(element, includeMargins)
Calculates element
height. If includeMargins
is set to true the final value will include top and bottom margins
; // or anodum.getElementHeight if using in browser const element = document; documentbody;elementstyleheight = '40px';elementstylemarginTop = '20px';elementstylemarginBottom = '20px'; const height = ; // height => 80px
getNodeByTreePath(rootNode, path)
Looks for an element inside rootNode
by related tree path path
.
; // or anodum.getNodeByTreePath if using in browser const path = 0 1 1 0;const rootNode = document;rootNodeinnerHTML = 'text<div><h1></h1><p>target</p></div>'; const node = ; // node.nodeType => 3 (#text)// node.textContent => target
getTreePathOfNode(node)
Calculates a tree path of target node
.
; // or anodum.getTreePathOfNode if using in browser const element = document;elementinnerHTML = 'text<p>inner text</p>'; const path = ; // path => [0, 1, 0]
hasNonEmptyPseudoElements(element)
Checks if element
has the :before
or :after
elements with non-empty content
property.
; // or anodum.hasNonEmptyPseudoElements if using in browser const element = document;const style = document;styleinnerHTML = 'div:before { content: "true" }'; documentbody;documentbody; const result = ; // result => true
hasNonEmptyShallowTextNodes(element)
Checks if element
has a non-empty direct text child node.
; // or anodum.hasNonEmptyShallowTextNodes if using in browser const element = document;elementinnerHTML = 'text'; const result = ; // result => true
isAttributeNode(node)
Check if node
is an AttributeNode
; // or anodum.isAttributeNode if using in browser const node = document;const result = ; // result => true
isChildOfElement(node, testElement)
Checks if node
is a child of target testElement
; // or anodum.isChildOfElement if using in browser const highLevelContainer = document;const container = document;const node = document; highLevelContainer;container; const result = ; // result => true
isChildOfTag(node, testTag)
Checks if node
is a child of an element with target testTag
; // or anodum.isChildOfTag if using in browser const highLevelContainer = document;const container = document;const node = document; highLevelContainer;container; const result = ; // result => true
isCommentNode(node)
Checks if node
is a CommentNode
; // or anodum.isCommentNode if using in browser const node = document; const result = ; // result => true
isConditionalCommentNode(node)
Checks if node
is a conditional CommentNode
; // or anodum.isConditionalCommentNode if using in browser const container = document;containerinnerHTML = '<![if expression]> HTML <![endif]>';const node = containerfirstChild; const result = ; // result => true
isDocumentFragmentNode(node)
Checks if node
is a DocumentFragmentNode
; // or anodum.isDocumentFragmentNode if using in browser const node = document; const result = ; // result => true
isDocumentNode(node)
Checks if node
is a DocumentNode
; // or anodum.isDocumentNode if using in browser const result = ; // result => true
isDocumentTypeNode(node)
Checks if node
is a DocumentTypeNode
; // or anodum.isDocumentTypeNode if using in browser const node = documentdoctype; const result = ; // result => true
isElementNode(node)
Checks if node
is a ElementNode
; // or anodum.isElementNode if using in browser const node = document; const result = ; // result => true
isEmbedElement(node)
Checks if node
is a embed element. More details here
; // or anodum.isEmbedElement if using in browser const node = document; const result = ; // result => true
isHeadingElement(node)
Checks if node
is a heading element. More details here
; // or anodum.isHeadingElement if using in browser const node = document; const result = ; // result => true
isInteractiveElement(node)
Checks if node
is an interactive element. More details here
; // or anodum.isInteractiveElement if using in browser const node = document; const result = ; // result => true
isNestingAllowed(element, containerElement)
Checks if nesting element
into containerElement
is valid in terms of html specs. More details here
; // or anodum.isNestingAllowed if using in browser const containerElement = document;const element = document; const result = ; // result => false
isNode(node)
Checks if node
is a Node.
; // or anodum.isNode if using in browser const result = ; // result => true
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
; // or anodum.isNode if using in browser const node = document; const result = ; // result => true
isNonEmptyTextNode(node)
Checks if node
is a TextNode with non-empty text content.
; // or anodum.isNode if using in browser const node = document; const result = ; // result => true
isOneOfTags(element)
Checks if element
matches to one of the specified tags.
; // or anodum.isOneOfTags if using in browser const element = document; const result = ; // result => true
isPhrasingElement(element)
Checks if element
is a phrasing Element. More details here
; // or anodum.isPhrasingElement if using in browser const element = document; const result = ; // result => true
isProcessingInstructionNode(node)
Checks if node
is a ProcessingInstructionNode.
; // or anodum.isProcessingInstructionNode if using in browser const node = document; const result = ; // result => true
isRenderedNode(node)
Checks if node
is rendered.
; // or anodum.isRenderedNode if using in browser const result = ; // result => true
isSameOrContains(element, testElement)
Checks if element
and testElement
it the same element, or element
contains testElement
.
const element = document;const element2 = document; ; // true; // false element;; // true
isSectioningElement(element)
Checks if element
is a sectioning element. More details here
; // or anodum.isSectioningElement if using in browser const element = document; const result = ; // result => true
isSelfClosingElement(element)
Checks if element
is a self-closing element.
; // or anodum.isSelfClosingElement if using in browser const element = document; const result = ; // result => true
isTag(element, testTag)
Checks if element
matches to specified testTag
.
; // or anodum.isTag if using in browser const element = document; const result = ; // result => true
isTextNode(node)
Checks if node
is a TextNode.
; // or anodum.isTextNode if using in browser const node = document; const result = ; // result => true
isValidSelector(cssSelector)
Checks if cssSelector
is valid.
; // or anodum.isValidSelector if using in browser const result = ; // result => true
mergeSiblingTextNodes(node)
Merges all sibling text nodes into single one
; // or anodum.mergeSiblingTextNodes if using in browser const html = 'hello';const dom = domParser;dombody; ; // dom.body.childNodes.length => 1// dom.body.childNodes[0].textContent => 'helloworld'
normalizeHTML(html)
Removes/Replaced unmaintainable symbols from target html string
; // or anodum.normalizeHTML if using in browser const html = '\n\n\n<div> test\u202F</div>\t\t\t'; const result = ; // 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.
; // or anodum.parseDocumentFromString if using in browser const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';const dom = ; // dom.title => 'test'
parseElementFromString(html)
Parses target html
string into ElementNode. html
should contain a single root element, otherwise a TypeError
will be thrown.
; // or anodum.parseElementFromString if using in browser const html = '<div></div>'; const element = ; // 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.
; // or anodum.removeSetOfNodes if using in browser const html = '<p>paragraph1</p>hello';const dom = domParser; const nodes = dom; dombody; ; // nodes[0].parentNode => null// dom.body.childNodes.length => 1// dom.body.childNodes[0].textContent => 'helloworld'
serializeDocument(document)
Serializes target document
into html string.
; // or anodum.serializeDocument if using in browser const html = '<html class="example"></html>';const dom = domParser; const result = ;// result => '<html class="example"><head><title></title></head><body></body></html>'
serializeDocumentType(document)
Serializes doctype of target document
into html string.
; // or anodum.serializeDocumentType if using in browser const html = '<!DOCTYPE html><html><head><title>test</title></head><body></body></html>';const dom = domParser; const result = ; // 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.
; // or anodum.traverseNode if using in browser const element = document;elementinnerHTML = '<section><!--comment--><h1></h1></section>text'; ;