JavaScript getElementsByClassName – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar o getElementsByClassName()método para selecionar elementos pelo nome da classe.

Introdução ao método getElementsByClassName()

O getElementsByClassName()método retorna uma matriz de objetos dos elementos filhos com um nome de classe especificado. O getElementsByClassName()método está disponível no documentelemento ou em qualquer outro elemento.

Ao chamar o método no documentelemento, ele pesquisa todo o documento e retorna os elementos filhos do documento:

let elements = document.getElementsByClassName(names);Linguagem de código:  JavaScript  ( javascript )

Entretanto, ao chamar o método em um elemento específico, ele retorna os descendentes desse elemento específico com o nome de classe fornecido:

let elements = rootElement.getElementsByClassName(names);Linguagem de código:  JavaScript  ( javascript )

O método retorna o elementsque é um HTMLCollection ativo dos elementos correspondentes.

O parâmetro nomes é uma string que representa um ou mais nomes de classe para correspondência; Para usar vários nomes de classe, você os separa por espaço.

Exemplos do método JavaScript getElementsByClassName()

Vejamos alguns exemplos de uso do getElementsByClassName()método.

Suponha que você tenha o seguinte documento HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript getElementsByClassName</title>
</head>
<body>
    <header>
        <nav>
            <ul id="menu">
                <li class="item">HTML</li>
                <li class="item">CSS</li>
                <li class="item highlight">JavaScript</li>
                <li class="item">TypeScript</li>
            </ul>
        </nav>
        <h1>getElementsByClassName Demo</h1>
    </header>
    <section>
        <article>
            <h2 class="secondary">Example 1</h2>
        </article>
        <article>
            <h2 class="secondary">Example 2</h2>
        </article>
    </section>
</body>
</html>Linguagem de código:  HTML, XML  ( xml )

1) Chamando JavaScript getElementsByClassName() em um exemplo de elemento

O exemplo a seguir ilustra como usar o getElementsByClassName()método para selecionar os <li>itens que são descendentes do <ul>elemento:

let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');

let data = [].map.call(items, item => item.textContent);

console.log(data);Linguagem de código:  JavaScript  ( javascript )

Saída:

['HTML', 'CSS', 'JavaScript', 'TypeScript']Linguagem de código:  JavaScript  ( javascript )

Como funciona:

Primeiro, selecione o <ul>elemento com o nome da classe menuusando o getElementById()método.
Em seguida, selecione <li>os elementos, que são descendentes do <ul>elemento, usando o getElementsByClassName()método.
Finalmente, crie uma matriz do conteúdo de texto dos <li>elementos pegando emprestado o map()método do Arrayobjeto.

2) Chamando JavaScript getElementsByClassName() no exemplo do documento

Para procurar o elemento com a classe heading-secondary, você usa o seguinte código:

let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);

console.log(data);Linguagem de código:  JavaScript  ( javascript )

Saída:

["Example 1", "Example 2"]Linguagem de código:  JavaScript  ( javascript )

Este exemplo chama o getElementsByClassName()método no documentobjeto. Portanto, busca os elementos com a classe secondaryem todo o documento.

Resumo

Use o método JavaScript getElementsByClassName()para selecionar os elementos filhos de um elemento que possui um ou mais nomes de classe fornecidos.