How to traverse a children and a div with JavaScript?

Question

How to traverse a children and a div with JavaScript?

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

5

I need a function that traverses #paicasas and leaves the background of all children "casa1, casa2 ...".

I tried to do this but I know it's far from right.

        function apagar(){
            for(var i in document.getElementById('paicasas')){
                document.getElementById('paicasas')[i].style.backgroundColor = "#FFF";
            }
        }

HTML

<div id="paicasas">
    <div id="casa1" onclick="mudarbg(this)"></div>
    <div id="casa2" onclick="mudarbg(this)"></div> 
    <div id="casa3" onclick="mudarbg(this)"></div> 
    </br>
    <div id="casa4" onclick="mudarbg(this)"></div> 
    <div id="casa5" onclick="mudarbg(this)"></div> 
    <div id="casa6" onclick="mudarbg(this)"></div> 
    </br>
    <div id="casa7" onclick="mudarbg(this)"></div> 
    <div id="casa8" onclick="mudarbg(this)"></div> 
    <div id="casa9" onclick="mudarbg(this)"></div> 
    <button type="button" onclick="apagar()">Novo</button>
</div>

Enjoying, I really need some stuff that explains about DOM.

javascript html loop dom

asked by anonymous 10.11.2014 / 21:12

3 answers

You are not generating the 1000 random numbers required How to check if a Font is already installed

score 3 · Answer 1

I was almost right; you just forgot to traverse the array of children, rather than the element's attributes.

Additionally, to get only the DIVs, just check the value of tagName of each child.

See the final script below:

var pai = document.getElementById("paicasas");
for(var i = 0; i < pai.children.length; i++){
    if(pai.children[i].tagName == "DIV") pai.children[i].style.backgroundColor = "#FFFFFF";
}

For educational purposes only, what you were doing previously was to scan each attribute of the parent object. Notice what the console prints:

for(var i in document.getElementById("paicasas")) console.log(i);
/*
  align
  onautocompleteerror
  onautocomplete
  onwaiting
  onvolumechange
  ontoggle
  ontimeupdate
  onsuspend
  ...
  children
  ...
*/

score 2 · Answer 2

2

Try this out

document.getElementById('paicasas').children[i].style.backgroundColor = "#FFF";

10.11.2014 / 21:21

score 1 · Answer 3

When you do for(var i in document.getElementById('paicasas')){ you will be going through all the properties of that object and not the elements that are your descendants.

I suggest using this:

function mudarbg(el) {
    el.style.backgroundColor = "#F0F";
}

function apagar() {
    var divs = document.querySelectorAll('#paicasas > [id^=casa]');
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.backgroundColor = "#FFF";
    }
}

#paicasas > div {
    padding: 10px;
    margin: 1px;
    border: 1px solid black;
}

<div id="paicasas">
    <div id="casa1" onclick="mudarbg(this)"></div>
    <div id="casa2" onclick="mudarbg(this)"></div>
    <div id="casa3" onclick="mudarbg(this)"></div>
    <br/>
    <div id="casa4" onclick="mudarbg(this)"></div>
    <div id="casa5" onclick="mudarbg(this)"></div>
    <div id="casa6" onclick="mudarbg(this)"></div>
    <br/>
    <div id="casa7" onclick="mudarbg(this)"></div>
    <div id="casa8" onclick="mudarbg(this)"></div>
    <div id="casa9" onclick="mudarbg(this)"></div>
    <button type="button" onclick="apagar()">Novo</button>
</div>

[id^=casa] will select elements whose ID starts with casa .