Skip to content
This repository has been archived by the owner on Jan 2, 2023. It is now read-only.

smacpherson64/dom-path-utils

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Helpers for traversing ancestors in the dom

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published