Helper utilties for traversing ancestors in the dom.
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
getAncestors(element: HTMLElement): HTMLElement[]Get all ancestors of an element including detached elements.
<html>
<body>
<div></div>
</body>
</html>import { getAncestors } from 'dom-path-utils';
const ancestors = getAncestors(document.querySelector('div'));
// [html, body, div] (References the actual HTMLElement)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(element: HTMLElement): stringGet the classes selectors as a string separated by '.'
<div class="class1 class2 class3"></div>import { getClasses } from 'dom-path-utils';
const classes = getClasses(document.querySelector('div'));
// ".class1.class2.class3"getId(element: HTMLElement): stringGet the id as a string prefixed by '#'
<div id="element-id"></div>import { getId } from 'dom-path-utils';
const id = getId(document.querySelector('div'));
// "#element-id"getParent(element: HTMLElement): HTMLElement | nullGet the parent of the current element including detached elements.
<html>
<body>
<div></div>
</body>
</html>import { getParent } from 'dom-path-utils';
const ancestors = getParent(document.querySelector('div'));
// body (References the actual HTMLElement)const parent = document.createElement('div');
const child = document.createElement('div');
parent.appendChild(child);
const results = getParent(child);
// div(parent) (References the actual HTMLElement)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.
<html>
<body id="body-id">
<div class="div-class"></div>
</body>
</html>import { getSelectorPath } from 'dom-path-utils';
const ancestors = getSelectorPath(document.querySelector('div'));
// "html > body#body-id > div.div-class"const parent = document.createElement('div');
const child = document.createElement('div');
parent.appendChild(child);
const results = getSelectorPath(child);
// "div > div"getSelector(element: HTMLElement, attributes: string[]): stringGets the string representation of a specific element.
The default attributes are id and class.
<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(element: HTMLElement): stringGet the element tag string in lowercase
<div class="some-class" id="some-id"></div>import { getTagName } from 'dom-path-utils';
const id = getTagName(document.querySelector('div'));
// "div"MIT