0.0.3 • Published 3 years ago
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 |