Selector.child Method

Returns an array of child elements. Follow this guide to access non-element nodes.

Syntax

child

Selector().child() → Selector

Returns an array of child elements, starting with direct descendants.

child(n)

Selector().child(n) → Selector

Returns an array of n-th closest descendant elements. If n is negative, the method returns an array of n-th most distant descendant elements.

Argument	Type	Description
n	Integer	Index in the child array

child(cssSelector)

Selector().child(cssSelector) → Selector

Looks for element descendants that match the CSS Selector argument.

Argument	Type	Description
cssSelector	String	The CSS Selector string

child(filterFn, dependencies)

Selector().child(filterFn [, dependencies]) → Selector

Filters element descendants with a function.

Argument	Type	Description
filterFn	Function	The filter function
dependencies (optional)	Object	Filter function arguments

See Filter DOM With A Function.

Examples

// Selects all children of all fieldset elements.
const fieldsetChildren = Selector('fieldset').child();

// Selects all closest children of all div elements.
const divClosestChildren = Selector('div').child(0);

// Selects all furthest children of all .column elements.
const columnFurthestChildren = Selector('.column').child(-1);

// Selects all p elements that are children of a fieldset element.
const fieldsetPChildren = Selector('fieldset').child('p');

Filter DOM with a function

To filter the DOM with a client-side filter function, pass a function argument to the method.

The filterFn argument accepts the following parameters:

Parameter	Description
node	The current node.
idx	The index of the current node.
originNode	The DOM Node .

Selector('section').prevSibling((node, idx, originNode) => {
    // node === the <section>'s preceding sibling node
    // idx === index of the current <section>'s preceding sibling node
    // originNode === the <section> element
});

Use the dependencies option to pass variables to the filter function.

const isNodeOk = (node, idx, originNode) => {
    console.log({ node, idx, originNode });
    return idx === 6;
};

const filteredDiv = Selector('div').prevSibling((node) => {
    return !isNaN(node.textContent);
}, { isNodeOk });