JavaScript getElementsByClassName (Português)

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

Introdução ao método getElementsByClassName ()

Cada elemento HTML tem um atributo de classe opcional como este:

Code language: HTML, XML (xml)

O valor do atributo class é uma lista separada por espaço das classes do elemento. As classes diferenciam maiúsculas de minúsculas.

As classes permitem que você use CSS para combinar elementos. Por exemplo:

Code language: CSS (css)

Em JavaScript, você usa o método getElementsByClassName() para selecionar elementos com base em suas classes.

O método getElementsByClassName() está disponível no objeto document e em qualquer elemento HTML.

O getElementsByClassName() método aceita um único argumento que é uma string que contém um ou mais nomes de classe:

Code language: JavaScript (javascript)

Neste sintaxe, o parâmetro classNames é uma string que representa um nome de classe correspondente. Por exemplo:

Code language: JavaScript (javascript)

Se você combinar elementos por várias classes, precisará usar um espaço em branco para separá-los assim:

Code language: JavaScript (javascript)

Observe que você não pode usar seletores de classe, por exemplo, .btn ou .btn-primary para getElementsByClassName() método.

O getElementsByClassName() método retorna um HTMLCollection vivo de elementos, que é um objeto semelhante a uma matriz.

Se você chamar o método getElementsByClassName() no objeto document, o método pesquisará para elementos com os nomes de classe especificados em todo o documento.

No entanto, quando você chama o método getElementsByClassName() em um elemento específico, ele retorna apenas os elementos correspondentes no subárvore desse elemento.

Exemplos de JavaScript getElementsByClassName ()

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

Suponha que você tenha o seguinte HTML:

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

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

Resultado:

Code language: JavaScript (javascript)

Como funciona:

• Primeiro, selecione o elemento <ul> com o nome da classe menu usando o método getElementById().
• Em seguida, selecione <li> elementos, que são descendentes de <ul> elemento, usando o método getElementsByClassName().
• Finalmente, crie uma matriz do conteúdo de texto de <li> elementos emprestando o map() método do objeto Array.

2) Chamando JavaScript getElementsByClassName () no exemplo de documento

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

Resultado:

Code language: JavaScript (javascript)

Este exemplo chama o método getElementsByClassName() no objeto document, portanto, procura os elementos com a classe heading-secondary em todo o documento.

Neste tutorial, você aprendeu como usar o método getElementsByClassName() para selecionar elementos por um ou mais nomes de classe.