Em JavaScript, a árvore DOM segue a estrutura hierárquica contendo uma grande lista de nós. A estrutura começa no nó raiz (Documento) e, em seguida, acrescenta os nós pai e filho. Para acessar esses nós filhos, o JavaScript oferece o “ childNodes ' propriedade. Esta propriedade auxilia os usuários a acessar todos ou um nó filho específico do elemento pai associado.
Esta postagem detalha o objetivo e o funcionamento da propriedade “childNodes” do elemento HTML DOM em JavaScript.
O que é a propriedade “childNodes” do elemento HTML DOM em JavaScript?
O ' childNodes ” é uma propriedade somente leitura que retorna a lista de todos os nós filhos de um elemento na forma de um objeto NodeList. Essa propriedade especial também pode ser utilizada para acessar o nó filho específico do elemento pai. O nó filho começa a partir do índice “0 (zero)”. Além disso, os espaços em branco, comentários e nós de texto também são considerados nós filhos.
Sintaxe
element.childNodes
A sintaxe acima generalizada retorna o objeto NodeList contendo os nós filhos do elemento de destino.
Vamos usar as sintaxes definidas acima de forma prática.
Código HTML
Primeiro, dê uma olhada no código HTML indicado:
< div eu ia = 'div' estilo = 'borda: 2px preto sólido; altura: 200px; largura: 250px; preenchimento: 10px' >< h2 > Primeiro título h2 >
< h3 > Segundo título h3 >
< p > Primeiro parágrafo p >
< p > Segundo parágrafo p >
div >
< p eu ia = 'para' > p >
Nas linhas de código acima:
- Adicione um “ ” elemento com um id “Div”, estilizado com a ajuda das propriedades declaradas (borda, altura e largura).
- Dentro do elemento “
”, defina dois títulos e dois parágrafos, respectivamente.- Por último, o “ ” incorpora um parágrafo vazio com um id “para”.
Observação: O código HTML declarado é considerado ao longo deste post.
Exemplo 1: Aplicando a propriedade “childNodes” para obter o número total de nós filhos de um elemento específico
Este exemplo utiliza as propriedades “childNodes” e “length” para obter o número total de nós filhos presentes no elemento pai específico.
Código JavaScript
Vamos seguir o código fornecido:
< roteiro >
const elem = document.getElementById ( 'div' ) ;
deixar num = elem.childNodes.length;
document.getElementById ( 'para' ) .innerHTML = 'Valor: ' + num;
roteiro >Nas linhas de código acima:
- A variável “elem” utiliza a função “ getElementById() ” para acessar o elemento pai cujo id é “Div”.
- A variável “num” usa o “ childNodes ' e ' comprimento ” para obter o número de nós filhos presentes no elemento “” acessado.
- Por fim, o método “getElementById()” busca o parágrafo vazio incorporado por meio de seu id “para” para anexá-lo ao valor da variável “num”.
Saída
A saída implica que há um total “ 9 ” nós filhos no elemento “
” fornecido, incluindo os espaços em branco entre os elementos.Exemplo 2: aplicando a propriedade “childNodes” para obter o nome de um nó filho específico
A propriedade “childNodes” também pode ser utilizada com a propriedade “nodeName” para obter o nome do(s) nó(s) filho. Vejamos na prática.
Código JavaScript
Percorra o seguinte código:
< roteiro >
const elem = document.getElementById ( 'div' ) ;
deixar num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'para' ) .innerHTML = 'Elemento: ' +num;
roteiro >Aqui o ' childNodes ” está vinculada à propriedade “ nodeName ” para obter o nome do nó filho especificado com base no índice acessado, ou seja, “1”.
Saída
A saída exibe o nome do nó filho, ou seja, elemento “H2” em relação ao índice especificado.
Exemplo 3: Aplicando a propriedade “childNodes” para alterar a cor do texto de um nó filho específico
Este exemplo usa a propriedade discutida para alterar a cor do filho indexado de destino.
Código JavaScript
Considere o seguinte código:
< roteiro >
document.getElementById ( 'div' ) .childNodes [ 3 ] .estilo.cor = 'verde' ;
roteiro >Aqui o ' getElementById() ” busca o elemento pai “
” por meio de seu id “Div” e seu nó filho colocado no índice especificado por meio do método “ childNodes ” propriedade, respectivamente. Depois disso, use o “ estilo.cor ” para alterar a cor do texto do nó filho acessado.Saída
A saída confirma que a cor do texto do nó filho especificado foi alterada adequadamente.
Conclusão
Em JavaScript, o “ childNodes ” recupera o objeto nodeList que contém os nós filhos do elemento HTML de destino. Os nodos filhos podem ser acessados todos de uma vez ou o desejado especificando o número do índice com a propriedade “childNodes”. Esta propriedade permite a execução da função JavaScript para realizar tarefas especiais nos nós filhos acessados. Este artigo elaborou a aplicação da propriedade “childNodes” em JavaScript.
- Dentro do elemento “