get-css-tags

Create an array with simple or full cssSelector paths.

Usage no npm install needed!

<script type="module">
  import getCssTags from 'https://cdn.skypack.dev/get-css-tags';
</script>

README

Node Parser: getTags

The getTags module (part of the upcoming Node Parser Package) recursively parses the DOM and calculates the full CSS selection tags for every HTML DOM element.

Example Output:

tags = [
    "html > head > meta:nth-child(1)"
    "html > head > meta:nth-child(2)"
    "html > head > script:nth-child(3)"
    "html > head > script:nth-child(4)"
    "html > head > title"
    "html > head > meta:nth-child(6)"
    "html > head > meta:nth-child(7)"
]

//youtube
tags = [
    "div#early-body"
    "div#a11y-announcements-message"
    "div#a11y-announcements-container"
    "div#body-container > form > input[type="hidden"]:nth-child(1)"
    "div#body-container > form > input[type="hidden"]:nth-child(2)"
    "div#body-container > form"
    "button#a11y-skip-nav"
    "button#appbar-guide-button > span > span"
]

Compared to JQuery output:

$obj = [
    html.redesign
    head
    meta
    meta
    script
    script
    title
    meta
    meta
]

Example Usage:

getCSS.getTags(selector, array, options) selector starting node. array The array we're gonna push the tags into. options.simple[bool]: return simple selectors if true|full selectors if false. `

// EXAMPLE USAGE
// `getCSS.getTags(selector, array, options)`
var tags = [];
var selector = document.querySelector('body');
var opts = {
    simple: false
};

getCSS.getTags(selector, tags, opts)