Get child elements by tag name and class name in lightning web component

In this post, we are going to look at two new methods in the Lightning web component framework. Before the Summer 2020 release, there was only one way to select the child element, which is this.template.querySelector. But now, the parent element can get an element using two new methods.

• Element.getElementsByTagName() : With this API, a parent can query elements using the tag name. This method returns a list of HTML elements.
• Element.getElementsByClassName() : With this API, a parent can query elements using the class name. This method returns a list of HTML elements.

Examples of getElementsByTagName and getElementsByClassName in the Lightning web component.

1. Let us see some examples of these methods, in the below HTML markup, we have two h1 tags. We will use the getElementsByTagName method to get the list of h1 tags.

<template>
    <h1 class="slds-text-heading_large">heading one</h1>
    <p>some text ...</p>
    
    <h1 class="slds-text-heading_large">Heading two</h1>
    <p>some text ...</p>
    <lightning-button label="Get Child Elements" onclick={handleGetChildElementsClick}></lightning-button>
<template>

handleGetChildElementsClick(event){
    let childsList = this.getElementsByTagName('h1');
    console.log('h1 tags list' + childsList); // output : h1 tags list[object HTMLCollection]
    console.log('first h1 tag ' + childsList[0]); // output : first h1 tag [object HTMLHeadingElement]
}

Please note that the return type for both methods is a list.

2. Let us see another example of the tag name, you can even use this method to get the custom component by its name.

<template>
    <c-child></c-child>
<template>

handleGetChildElementsClick(event){
    let childsList = this.getElementsByTagName('h1')
    console.log('h1 tags list' + childsList);
    // h1 tags list[object HTMLCollection]
    console.log('first c-child component ' + childsList[0]);
    // first c-child component [object HTMLHeadingElement]
}

As you can see, you can easily get the custom component child elements using Element.getElementsByTagName() method, isn't this cool?

3. Let's see the last example, this time we will use Element.getElementsByClassName(). In the below example we have three different types of elements with the same class, see how we can get all of them using this method.

<template>
    <h1 class="mychild">{title}</h1>
    
    <c-child class="mychild"></c-child>
    
    <div class="mychild"> Just another div</div>
<template>

handleGetChildElementsClick(event){
    let childsList = this.getElementsByClassName('mychild')
    console.log('elements with class mychild: ' + childsList.length);
    // output : elements with class mychild: 3
}

Ok, that's it, a very small addition to the API of LWC, but it makes a very big difference.