document-all

Purpose

Find all elements in the DOM.

• Includes ShadowDom support
• Includes Iframe/Frame support

Getting Started

npm install document-all

API Options

  let options = {
    maxDepth: number, // Max depth to search ShadowDom or Iframes (default: Infinity)
    propertyKey: string, // The property to traverse down, typically 'children' or 'childNodes'
    filter: function(elem) : boolean // A function to control the depth search
  }

API

findAllNodes

import { findAllNodes } from 'document-all'

// Max number of shadow roots to go down. Default is Infinity.
let options = {}
options.maxDepth = 3;

// Container can be any Node
const container = document

findAllNodes(document, options)

findAllElements

import { findAllElements } from 'document-all'

// Max number of shadow roots to go down. Default is Infinity.
let options = {}
options.maxDepth = 3;

// Container can be any Element, DocumentFragment, or ShadowRoot
const container = document

findAllElements(document, options)

Element / Node Order

Elements and Nodes are returned in the order they're discovered via a "depth-first" search.

Example:

<div>
    <my-custom-element>
      #shadowRoot
      <slot></slot>
    </my-custom-element>

    <my-other-custom-element>
      #shadowRoot
      <slot></slot>
    </my-other-custom-element>
</div>

Would produce an array like this:

[
  "div",

  // my-custom-element
  "my-custom-element",
  "ShadowRoot",
  "slot"

  // my-other-custom-element
  "my-other-custom-element",
  "ShadowRoot",
  "slot"
]