Neste tutorial, vamos demonstrar como utilizar a propriedade element.children (DOM) para facilitar a manipulação de elementos HTML na linguagem JavaScript.

Definições:

a) O Modelo de Objeto de Documentos (do inglês DOM, Document Object Model) é uma API definida pelo W3C (Consórcio da Rede Mundial) para representar e interagir com qualquer documento HTML.

b) O Dom é um modelo de documento carregado pelo navegador, sendo representado por uma árvore de nós, onde cada nó representa uma parte do documento, como um elemento HTML, um texto ou um comentário por exemplo.

c) Os elementos HTML são as tags de um documento HTML que constituem os elementos da árvore DOM. Cada elemento pode ter atributos, textos ou ainda outros elementos.

b) A propriedade element.children retorna um HTMLCollection ativo que contém todos os elementos filho (child) do elemento HTML no qual foi chamado.

c) A interface HTMLCollection representa uma coleção genérica (objeto array) de elementos HTML (na ordem em que aparecem no documento) e oferece métodos e propriedades para selecioná-los da lista. Uma HTMLCollection é atualizada automaticamente sempre que o documento for modificado.

1. Entendendo a propriedade children

1.1.  Como já vimos nas definições acima, a propriedade children no JavaScript retorna uma coleção com todos os elementos filhos do elemento HTML pelo qual foi chamado.

1.1.1. Essa coleção de elementos HTML se apresenta na forma de um array, onde os seus itens são classificados na ordem em que  aparecem no documento.

1.1.2. Os elementos filhos como estão inseridos em um objeto array, podem ser acessados por números de índice. Atenção: O índice sempre começa em 0 (zero).

1.1.3. Para determinar o número de elementos filho, podemos utilizar a propriedade length do objeto HTMLCollection.

1.2 No exemplo abaixo vamos obter e exibir o nome e o conteúdo do segundo elemento filho de um elemento HTML.

HTML

<h1> Conhcecendo a propriedade Children </h1>

<button onClick="exibir()">Clique para exibir o segundo elemento filho</button>

<div id="elementoPai">
	<h3>Sou o primeiro texto</h3>
    <h4>Sou o segundo texto</h4>
    <h5>Sou o terceiro texto</h5>
</div>

<hr/>

<div id="resultado"></div>

JavaScript

function exibir() {
    let elementoFilho = document.getElementById("elementoPai").children        
    document.querySelector("#resultado").innerHTML = `
            <h2>Resultado: </h2>
            <p> O segundo elemento filho é: ${elementoFilho[1].tagName}
            <p> O conteúdo do segundo elemento filho é: ${elementoFilho[1].innerHTML}        
        `
}

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=242

Veja o resultado:

Observações:

1.2.1. Usamos template string para exibir o resultado do nosso exemplo. Templates Strings são strings que permitem múltiplas linhas e expressões embutidas. Para saber mais leia: Manipulando strings com Templates Strings, o pulo do gato do JavaScript moderno.

1.2.1. Usamos a propriedade element.children para obtermos o HTMLCollection do elemento pai, denominado de elementoFilho. É importante salientar que o HTMLCollection obtido é um array e que podemos acessar seus itens através de um índice numérico, começando por 0 (zero).

1.2.2. Usamos a expressão elementoFilho[1].tagName para obtermos o nome da tag do segundo elemento filho. Veja que utilizamos a propriedade element.tagName.

1.2.2. Usamos a expressão elementoFilho[1].innerHTML para obtermos o conteúdo do segundo elemento filho. Veja que utilizamos a propriedade element.innerHTML.

1.3.  No próximo exemplo, vamos contar o número de elementos filho de um elemento HTML usando a propriedade length.

HTML

<h1> Conhcecendo a propriedade Children </h1>

<button onClick="exibir()">Clique para exibir o segundo elemento filho</button>

<div id="elementoPai">
	<h3>Sou o primeiro texto</h3>
    <h4>Sou o segundo texto</h4>
    <h5>Sou o terceiro texto</h5>
</div>

<hr/>

<div id="resultado"></div>

 JavaScript

function exibir() {
    let elementoFilho = document.getElementById("elementoPai").children        
    document.querySelector("#resultado").innerHTML = 
      "<h3>O elemento HTML pai tem " + elementoFilho.length + " elementos filho.</h3>"
}

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=243

Veja o resultado: 

Observações:

1.3.1. Como no exemplo anterior, usamos a propriedade element.children para obtermos o HTMLCollection do elemento pai, denominado de elementoFilho.

1.3.2. Para contar o número de elementos filho, utilizamos a expressão elementoFilho.length.

2. Mais exemplos de utilização da propriedade children

2.1. O exemplo a seguir irá obter o conteúdo completo de uma lista HTML.

HTML

<h1> Obtendo todo conteúdo de uma lista HTML </h1>

<button onClick="exibir()">Clique para extrair o conteúdo da lista</button>

<h3>Lista HTML</h3>

<ul id="elementoPai">
	<li>Eu sou a linha 1</li>
    <li>Eu sou a linha 2</li>
    <li>Eu sou a linha 3</li>
    <li>Eu sou a linha 4</li>
    <li>Eu sou a linha 5</li>
    <li>Eu sou a linha 6</li>
</ul>

<hr/>

<p id="resultado1"></p>
<p id="resultado2"></p>

 JavaScript

function exibir() {
    let elementoFilho = document.getElementById("elementoPai").children
        
    // resultado 1
    document.querySelector("#resultado1").innerHTML = "A lista tem: " + elementoFilho.length + " itens:"
        
    // resultado 2
    let itemLista = ""
    for (let i=0; i < elementoFilho.length; i++) {
       itemLista += "item " + (i+1) + " - " + elementoFilho[i].innerHTML + "<br/>"
    }                       
    document.querySelector("#resultado2").innerHTML = itemLista      
}

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=244

Veja o resultado:

2.2. No exemplo abaixo, vamos alterar a cor da fonte do segundo elemento filho de um elemento HTML.

Obs.: Para manipular estilos CSS, leia Como manipular propriedades CSS com JavaScript.

HTML

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 20px;
  padding: 5px;
}
</style>
</head>
<body>

<h1>Mudar a cor da fonte do segundo elemento filho</h1>

<button onclick="mudarCor()">Clique para mudar a fonte da segunda linha</button>
<button onclick="voltar()">Clique para voltar a cor da fonte original</button>

<div id="elementoPai">
  <p>Primeiro p elemento</p>
  <p>Segundo p elemento</p>
  <p>Terceiro p elemento</p>
</div>

</body>
</html>

 JavaScript

function mudarCor() {
  var c = document.getElementById("elementoPai").children;
  c[1].style.color = "red";
}

function voltar() {
  var c = document.getElementById("elementoPai").children;
  c[1].style.color = "#000";
}

  Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=245

Veja o resultado:

2.3. Neste outro exemplo, vamos obter e exibir o terceiro elemento filho de um elemento HTML select.

HTML

<h1>Obter o texto do 3º elemento filho de um elemento HTML</h1>

<button onclick="exibir()">Clique para obter o texto do terceiro elemento filho do elemento select abaixo.</button>
<br><br>

<select id="elementoPai" size="4">
  <option>Beterraba</option>
  <option>Cenoura</option>
  <option>Beringela</option>
  <option>Abobrinha</option>
  <option>Giló</option>
</select>
<br><br>

<hr/>

<p id="demo"></p>

 JavaScript

function exibir() {
  let c = document.getElementById("elementoPai").children;
  document.getElementById("demo").innerHTML = c[2].text;
}

Teste o código acima no nosso Squids Editor: http://squids.com.br/editor/index.php?id=246

Veja o resultado:

Documentação Oficial

1. [element.children] » Sobre a propriedade children - MDN Web Docs.

2. [HTMLCollection] » Sobre a interface HTMLCollection - MDN Web Docs.

3. [element.tagName] » Sobre a propriedade tagName - MDN Web Docs.

4. [element.innerHTML] » Sobre a propriedade innerHTML - MDN Web Docs.

5. [HTMLCollection.length] » Sobre a propriedade HTMLCollection.lenght - MDN Web Docs.

O anúncio abaixo ajuda manter o Portal Visual Dicas

Comentários