How to navigate a children and a div with Javascript?

Asked

Viewed 10,282 times

5

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

I tried to do it 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>

Taking advantage, I really need some material that explains about DOM.

javascript html loop dom
  • 1

    On the material of DOM, for being a slightly different subject, it is necessary to open a new question, ok? :)

  • What did you expect for(var i in document.getElementById('paicasas')) were to? In general, it is not recommended to use "for .. in" to access arrays (or array-Likes), so that even if the children of that element were in indexes the most correct way to iterate on them would be using a common "for" even.

  • And where it is recommended to use for in?

3 answers

3

It was almost right; you just forgot to scroll through the child array instead of the element attributes.

Additionally, to get only the DIV’s, just check the value of the tagName of every 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 earlier was scanning each attribute of the parent object. Note what the console prints:

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

  • An object holds arrays? ñ knew.

  • What would change if the parent element was a <form>?

  • 2

    An object is format by key-value pairs; children, for example, it is a key, whose value is the array of child objects; this specific array can be accessed through the syntax elPai.children or elPai["children"]. Therefore, yes, an object can contain not only one, but several arrays, as well as any other type of data within it :D

  • The tag specifically changes nothing. <div>, <form>, <table>, etc, being an HTML element, it is represented in Javascript as a DOM node; being a DOM node, it has the attribute children, which consists of this array of pointers for the child elements :) It is worth remembering which child-nodes textual are not found in the array children, but in the childNodes.

  • Rui. Thank you so much for the explanations. Just tell me why it is not possible to access the child element of DOM through getById a Naos ser q seja um <form>! For example, wrong: Document.getElementById('divpai')divfilho.style.backgroundColor != " #FFF"; Right:Document.getElementById('form')input.style.backgroundColor != " #FFF".

  • I have prepared a short commented test for you :) http://jsfiddle.net/ruipimentel/k6wjm2dq/ | You must activate the browser console to see the result!

Show 1 more comment

2

Try it this way 

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

1

When does for(var i in document.getElementById('paicasas')){ will be traversing all the properties of that object and not the elements that are its descendants.

I suggest using like 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.

Browser other questions tagged javascript html loop dom

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