dom-path-utils

DOM Path Utils, help with traversing element ancestors

Usage no npm install needed!

<script type="module">
  import domPathUtils from 'https://cdn.skypack.dev/dom-path-utils';
</script>

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