Finding child element of parent with JavaScript

javascript

prompt-engineering

performance

selectors

byAnton Shumikhin·Feb 7, 2025

Here's the strength of a JavaScript Ninja — target a discrete child within a DOM tree using querySelector or querySelectorAll with a CSS selector:

let parent = document.getElementById('parentId');
let child = parent.querySelector('.childClass'); // One swift blow, only one shall emerge
let children = parent.querySelectorAll('.childClass'); // A rain of pain, every match feels it

The art lies in understanding the difference between single and multiple extraction within a DOM for intricate operations.

Adding precision with multiple classes

If the element you target has multiple classes, let your JavaScript show no mercy:

let parent = document.querySelector('.parentClass');
let childOfMultiClassParent = parent.querySelector('.class1.class2'); // Takes 'em all on

Direct descendant mastery

The .children property lets you access direct child elements of any given parent:

let childrenDirect = parent.children; // Here kid, you've got nowhere to hide

Ignore the upper-case shield

Unleash case-insensitivity on a parent's tag name:

let parentsByTagName = [...document.getElementsByTagName('li')]
    .filter(element => element.nodeName.toLowerCase() === 'li'); // Send 'em lower-case!

The toolbox for JavaScript ninjas

Pointed attribute targeting

To pinpoint a child with a certain attribute inside the parent:

let childWithAttribute = parent.querySelector('[data-custom="value"]');

Attributes are your secret ninja weapon for pinpointing elements, even when classes and IDs fail.

Efficiency is key for a Ninja

When considering performance:

querySelector is quick and clean for isolating a single element.
querySelectorAll is a rain of stars for sweeping up multiple elements, but requires more chakra.

But remember, with great power comes great NodeList:

let nodeList = parent.querySelectorAll('.childClass');
nodeList.forEach(node => {
    console.log(node); // Each node will remember this day
});

And if you want to get fancy and use methods like map or filter, convert that NodeList into an Array:

let childrenArray = Array.from(nodeList);

Your ninja techniques and secret scrolls section

Protecting the global DOM village from conflicts

Ensure your selections are scoped to the intended parent to avoid creating a DOM village feud:

// Bad practice: creating feuds
let child = document.querySelector('.parent .childClass');
// Good practice: peace in our time
let parent = document.querySelector('.parent');
let child = parent.querySelector('.childClass');

The "Nesting-doll" technique

To navigate the DOM by class hierarchy, call upon the Nesting-doll technique:

let grandchild = parent.querySelector('.childClass .grandChildClass');

Take control of the structure you delve in, one level at a time.

The "Attribute-interrogation" Jutsu

Sometimes, a stealthy ninja needs to retreat and fetch attributes of the parent to launch a dynamic selector or for secret operations:

let parentId = parent.getAttribute('id');
let childByParentId = document.querySelector(`#${parentId} .childClass`);

Ascending levels of Ninja skills

Scoped yet complex selectors

In a deeply nested and complex structure, use your mondo-cool scoped selectors:

let building = document.querySelector('.city .building');
let officeRooms = building.querySelectorAll('.office:not(.under-construction)');

We've just scoped out all the offices in a building that are not under construction.

Be the wind of change with dynamic content

When the content is ever-changing like leaves in the wind, ensure live collections or re-querying when there's a DOM update:

let dynamicChildren = parent.getElementsByClassName('dynamic-child');
// These ain't static kids

Efficient DOM manipulation as a Pro Ninja

That multiple edits don't create a ruckus in the village:

let fragment = document.createDocumentFragment();
nodeList.forEach(node => {
  let newChild = document.createElement('div');
  fragment.appendChild(newChild); // Silence of the nodes
});
parent.appendChild(fragment);