DOM Path Utils
Helper utilties for traversing ancestors in the dom.
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies:
npm install --save dom-path-utils
Utils
getAncestors
getAncestors(element: HTMLElement): HTMLElement[]Get all ancestors of an element including detached elements.
Examples
<html>
<body>
<div></div>
</body>
</html>Part of the Dom
import { getAncestors } from 'dom-path-utils';
const ancestors = getAncestors(document.querySelector('div'));
// [html, body, div] (References the actual HTMLElement)Detached Elements Example
const parent = document.createElement('div');
const child = document.createElement('div');
const grandchild = document.createElement('div');
child.appendChild(grandchild);
parent.appendChild(child);
const results = getAncestors(grandchild);
// [div(parent), div(child), div(grandchild)] (References the actual HTMLElement)getClasses
getClasses(element: HTMLElement): stringGet the classes selectors as a string separated by '.'
Examples
<div class="class1 class2 class3"></div>import { getClasses } from 'dom-path-utils';
const classes = getClasses(document.querySelector('div'));
// ".class1.class2.class3"getId
getId(element: HTMLElement): stringGet the id as a string prefixed by '#'
Examples
<div id="element-id"></div>import { getId } from 'dom-path-utils';
const id = getId(document.querySelector('div'));
// "#element-id"getParent
getParent(element: HTMLElement): HTMLElement | nullGet the parent of the current element including detached elements.
Examples
<html>
<body>
<div></div>
</body>
</html>Part of the Dom
import { getParent } from 'dom-path-utils';
const ancestors = getParent(document.querySelector('div'));
// body (References the actual HTMLElement)Detached Elements Example
const parent = document.createElement('div');
const child = document.createElement('div');
parent.appendChild(child);
const results = getParent(child);
// div(parent) (References the actual HTMLElement)getSelectorPath
getSelectorPath(element: HTMLElement, attributes: string[]): stringGets the string representation of the selector path. Note: This selector is intended to be a general selector not a fully unique selector, multiple elements may match this selector.
The default attributes are id and class.
Examples
<html>
<body id="body-id">
<div class="div-class"></div>
</body>
</html>Part of the Dom
import { getSelectorPath } from 'dom-path-utils';
const ancestors = getSelectorPath(document.querySelector('div'));
// "html > body#body-id > div.div-class"Detached Elements Example
const parent = document.createElement('div');
const child = document.createElement('div');
parent.appendChild(child);
const results = getSelectorPath(child);
// "div > div"getSelector
getSelector(element: HTMLElement, attributes: string[]): stringGets the string representation of a specific element.
The default attributes are id and class.
Examples
<div id="div-id" class="div-class"></div>import { getSelector } from 'dom-path-utils';
const selector = getSelector(document.querySelector('div'));
// "div#div-id.div-class"getTagName
getTagName(element: HTMLElement): stringGet the element tag string in lowercase
Examples
<div class="some-class" id="some-id"></div>import { getTagName } from 'dom-path-utils';
const id = getTagName(document.querySelector('div'));
// "div"LICENSE
MIT