0

Possuo uma <div> com diversos filhos, como mostrada a seguir:

<div id="minha-div>
    <span class="filhos-1" id="filho-1"><!-- outros aqui --></span>
    <p class="filhos-2" id="filho-2"><!-- outros aqui --></p>
    <div class="filhos-1" id="filho-3">
        <span class="filhos-2" id="filho-4"><!-- outros aqui --></span>
    </div>
</div>

E eu quero realizar operações com os elementos filhos da <div>, de forma semelhante ao pseudocódigo abaixo:

var pai = document.getElementById("minha-div");

// retorna os elementos #filho-1 e #filho-3
var filhos1 = pai.pesquisa('.filhos-1');

// retorna os elementos #filho-2 e #filho-4
var filhos2 = pai.pesquisa('.filhos-2');

Como devo proceder para realizar essas seleções sem usar JQuery?

2 Respostas 2

4

Eu te aconselho a fazer as suas buscas utilizando document.querySelector ou document.querySelectorAll, com eles você é capaz de fazer buscas utilizando a sintaxe de CSS.

<div id="minha-div>
    <span class="filhos-1" id="filho-1"><!-- outros aqui --></span>
    <p class="filhos-2" id="filho-2"><!-- outros aqui --></p>
    <div class="filhos-1" id="filho-3">
        <span class="filhos-2" id="filho-4"><!-- outros aqui --></span>
    </div>
</div>

Nesse seu exemplo você poderia buscar todos os elementos filhos apenas de minha div utilizando document.querySelectorAll('#minha-div > *') ou buscar todos os elementos abaixo de #minha-div que tenham a classe filhos-1 utilizando document.querySelectorAll('#minha-div .filhos-1') e assim por diante.

console.log('#minha-div > *');
let filhos = document.querySelectorAll('#minha-div > *');
filhos.forEach(console.log);
console.log('');

console.log('#minha-div .filhos-1');
filhos = document.querySelectorAll('#minha-div .filhos-1');
filhos.forEach(console.log);
console.log('');
<DOCTYPE html>
<html>
<body>
<div id="minha-div">
    <span class="filhos-1" id="filho-1"><!-- outros aqui --></span>
    <p class="filhos-2" id="filho-2"><!-- outros aqui --></p>
    <div class="filhos-1" id="filho-3">
        <span class="filhos-2" id="filho-4"><!-- outros aqui --></span>
    </div>
</div>
</body>
</html>

Caso você tenha duvidas sobre como construir essas buscas, aqui estão são duas referencias sobre Seletores em CSS:
https://tableless.com.br/referencia-seletores-css/
https://www.maujor.com/tutorial/guia-completo-seletores-css3.php

4

Se quiser algum elemento, basta fazer igual ao ao que você fez para pegar o pai:

var pai = document.getElementById("minha-div");

var filho1 = document.getElementById("filho-1") // Aqui
console.log(filho1);
<DOCTYPE html>
<html>
<body>
<div id="minha-div">
    <span class="filhos-1" id="filho-1"><!-- outros aqui --></span>
    <p class="filhos-2" id="filho-2"><!-- outros aqui --></p>
    <div class="filhos-1" id="filho-3">
        <span class="filhos-2" id="filho-4"><!-- outros aqui --></span>
    </div>
</div>
</body>
</html>

Agora, se quiser pegar todos filhos do pai de uma vez, basta usar o children:

var pai = document.getElementById("minha-div");

var filhos = pai.children; // Aqui
console.log(filhos);
<DOCTYPE html>
<html>
<body>
<div id="minha-div">
    <span class="filhos-1" id="filho-1"><!-- outros aqui --></span>
    <p class="filhos-2" id="filho-2"><!-- outros aqui --></p>
    <div class="filhos-1" id="filho-3">
        <span class="filhos-2" id="filho-4"><!-- outros aqui --></span>
    </div>
</div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .