dom-path-utils
v0.2.0
Published
DOM Path Utils, help with traversing element ancestors
Downloads
12
Maintainers
Readme
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): string
Get 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): string
Get 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 | null
Get 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[]): string
Gets 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[]): string
Gets 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): string
Get 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