How to catch the children of an element with Javascript?

Asked

Viewed 2,782 times

0

I own a <div> with several children, as shown below:

<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>

And I want to perform operations with the child elements of <div>, similar to the pseudocode below:

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');

How should I proceed to perform these selections without using JQuery?

javascript dom

2 answers

4

If you want an element, just do as you did to catch the father:

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>

Now, if you want to take all the children of pai all at once, just use the 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>

4


I advise you to do your searches using document.querySelector or document.querySelectorAll, with them you are able to do searches using the CSS syntax.

<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>

In this example you could search all the child elements just of my div using document.querySelectorAll('#minha-div > *') or search all elements below #minha-div classy filhos-1 using document.querySelectorAll('#minha-div .filhos-1') and so on.

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>

If you have questions about how to build these searches, here are two references about CSS Selectors:
https://tableless.com.br/referencia-seletores-css/
https://www.maujor.com/tutorial/guia-completo-seletores-css3.php

Browser other questions tagged javascript dom

You are not signed in. Login or sign up in order to post.