Javascript - how to get a child element with a specific class, attribute or any other selector

on Javascript

In order to get a child element or several child elements you can use the querySelectorAll or QuerySelector functions. Yes these can be both at document level and subsequent elements. So if you know how to use QuerySelector(all) you can just go ahead and use it, if not there is an example for you right here. The querySelector and querySelectorAll are native javascript functions and you therefore do not need any libraries.

Selecting all children with a specific class

On this blog the following snippet of HTML is for the post content and sidebars:

<section class="post-content">
    <aside class="sidebar left-sidebar">
        <div class="lazy-load-ad sidebar-ad">
        </div>
    </aside>
    <!-- My post content is here -->
    <aside class="sidebar right-sidebar">
        <div class="lazy-load-ad sidebar-ad">
        </div>
    </aside>
</section>

If we had already selected the post-content element and now wanted to get the sidebars, we could call querySelectorAll('.sidebar') to get all the sidebar children:

//root element
var postContent = document.querySelector('.post-content');
//get children
var postContentSidebars = postContent.querySelectorAll('.sidebar');

The variable will contain all the children with the class "sidebar". You can do the same with attributes:

//get children with sidebar attribute
var postContentSidebars = postContent.querySelectorAll('[sidebar]');

This would of course require that they have this attribute, so the HTML would have to look like the following:

<section class="post-content">
    <aside sidebar>
        <div class="lazy-load-ad sidebar-ad">
        </div>
    </aside>
    <!-- My post content is here -->
    <aside sidebar>
        <div class="lazy-load-ad sidebar-ad">
        </div>
    </aside>
</section>

That is it

This I believe is the easiest way to find child elements of an element with any specific query selector. I hope this is what you were looking for, please let me know what you think in the comments down below!