custom-element-tree

const tree = new CustomElementTree();

Usage no npm install needed!

<script type="module">
  import customElementTree from 'https://cdn.skypack.dev/custom-element-tree';
</script>

README

Custom Element Tree

Usage

Generate a Custom Element Tree

const tree = new CustomElementTree();

Log the tree structure

tree.logTree();
// or
tree.logTreeCollapsed();

Custom Element Tree
|_<my-wrapper>
|_<list-wrapper>
|_<list-item>
|_<list-item>
|_<list-item>
|_<list-wrapper>
|_<list-item>
|_<list-item>
|_<list-item>
|_<list-wrapper>
|_<list-item>
|_<list-item>
|\_<list-item>

Get the tree nodes as a flat array

tree.flat();

// [{...}, {...}, {...}, {...}]

Access nodes in tree

tree.elements[1].children[0].children[2];
// > CustomElementNode { id: 552255 tagName: "tree-item", ...}

Query trees in the node

const treeItem = tree.elements[1].children[0].children[2];
const otherTreeItem = tree.elements[1];

treeItem.isChildOf(otherTreeItem);
// true
otherTreeItem.isParentOf(treeItem);
// true
otherTreeItem.isSiblingOf(treeItem);
// false

Get children recursively

const treeItem = tree.elements[1].children[0];

treeItem.allChildren();
// [{...}, {...}, {...}, {...}]

Custom Element Node API

CustomElementNode

Properties
Name Type Description
id number A randomly assigned unique ID to identify a tree element
tagName string HTML Tag name of custom element
element HTMLElement The HTML element reference of the CustomElementNode
parent CustomElementNode The Custom Element Node of custom element node's parent
parentId number The id number of the custom element node's parent. Same as node.parent.id
document Document The ownerDocument of the CustomElementNode's element
root Node The rootNode of the CustomElementNode's element
children Array<CustomElementNode> Array of CustomElementNodes that are children of this CustomElementNode and not children of a child of this node
siblings Array<CustomElementNode> Array of CustomElementNodes that are siblings of this CustomElementNode
inShadowRoot boolean Tells is the CustomElementNode's element is in the shadowRoot of the parent node's element
Methods
Name Returns
isChildOf(otherNode) If the caller is a child of the passed node
isParentOf(otherNode) If the caller is a paren of the passed node
isSiblingOf(otherNode) If the caller is a sibling of the passed node
allChildren() A array of all children of caller, recursively
logNode() Logs the node's data to the developer console