DOM Traversing
Overview
Phenix Elements provides DOM traversal methods to navigate relationships relative to selected elements. These include:
- ancestor: direct parent or closest matching ancestor
- siblings: adjacent elements at same level
- next: next sibling element(s)
- prev: previous sibling element(s)
- child: immediate child elements
ancestor
ancestor(target?: string): HTMLElement | HTMLElement[]
Returns the direct parent if no selector is provided, or the closest ancestor matching the selector:
// Direct parent
const parent = Phenix('.item').ancestor();
// Nearest ancestor with class .container
const container = Phenix('.item').ancestor('.container');
siblings
siblings(target?: string): HTMLElement[] | null
Returns sibling elements of each selected element. Without selector, returns all siblings; with selector, only matching ones:
// All siblings of each .nav-item
const navSibs = Phenix('.nav-item').siblings();
// Siblings matching .active
const activeSibs = Phenix('.nav-item').siblings('.active');
next
next(target?: string, all?: boolean): HTMLElement | HTMLElement[]
Returns the immediate next sibling, or if all
is true, all following siblings that match the optional selector:
// Immediate next sibling
const nextEl = Phenix('.item').next();
// First next matching .highlight
const highlighted = Phenix('.item').next('.highlight');
// All subsequent .highlight siblings
const highlights = Phenix('.item').next('.highlight', true);
prev
prev(target?: string, all?: boolean): HTMLElement | HTMLElement[]
Similar to next
, but for preceding siblings:
// Immediate previous sibling
const prevEl = Phenix('.item').prev();
// All previous .disabled siblings
const disabled = Phenix('.item').prev('.disabled', true);
child
child(target?: string): HTMLElement[]
Returns direct child elements. Without selector, returns all children; with selector, only matching ones:
// All children of .list
const children = Phenix('.list').child();
// Only <li> children
const items = Phenix('.list').child('li');
Example
Phenix(document).ready(() => {
// Highlight the first child of each section
Phenix('.section').child().forEach(el => el.classList.add('first-child'));
});