CODEWITHSUNDEEP
javascripthtml
Bogdan
Bogdan

Reputation: 1911

Why can't I get the childNodes of this div element properly?

I'm trying to get all the children of a div element (code below) in order to create a mechanism that unchecks parent checkboxes when none of the children are checked. All the children are in the same div but when I use div.childNodes[0], for example I get an Object Text element instead of a Div element.

The html code:

<div id="div_chk_ctl_adaugare" style="width: 100%; border: 0; padding: 0; background-color: white;">
            <div style="width: 99.5%-10px; border: 0; padding-left: 10px; background-color: white;">
                <input class="chck_nivel2_adaugare" id="chk_ctl_adaugare_conturi" name="chk_ctl_adaugare_conturi" type="checkbox" onChange="check_conturi_actiuni(\'adaugare\');" /><label for="pm_conturi_adaugare"><img id="pm_conturi_adaugare" name="plus" src="crm/imagini/plus-10.png" cursor="pointer"></img> Conturi </label>
            </div> 
                <div id="div_dir_conturi_adaugare" style="width: 100%; border: 0; padding: 0; background-color: white;">
                    '.$div_dir_conturi.'
                </div>
            <div style="width: 99.5%-10px; border: 0; padding-left: 10px; background-color: white;">
                <input class="chck_nivel2_adaugare" id="chk_ctl_adaugare_contacte" name="chk_ctl_adaugare_contacte" type="checkbox" onChange="check_contacte_actiuni(\'adaugare\');" /><label for="pm_contacte_adaugare"><img id="pm_contacte_adaugare" name="plus" src="crm/imagini/plus-10.png" cursor="pointer"></img> Contacte </label>
            </div> 
                <div id="div_dir_contacte_adaugare" style="width: 100%; border: 0; padding: 0; background-color: white;">
                    '.$div_dir_contacte.'
                </div>
</div>

Javascript:

var div_col = document.getElementById("div_chk_ctl_"+tip);
//alert(div_col.childNodes[0].data);
var uncheck_tate = 1;
for(var j = 0; j<div_col.childNodes.length; j+=2) {
    alert(div_col.childNodes[j]);
    if(div_col.childNodes[j].childNodes[0].checked == true) {
        uncheck_tate = 0        
    }
}

if(uncheck_tate == 1)
    document.getElementById("chk_ctl_"+tip).checked = false;
else
    document.getElementById("chk_ctl_"+tip).checked = true;

The uncommented alert prints [object Text]. Is there something about childNodes that I'm missing here? could I use anything else?

Upvotes: 0

Views: 924

Answers (2)

RobG
RobG

Reputation: 147513

If you want all the inputs that are descendants of an element, not just the direct children, use getElementsByTagName:

var div_col = document.getElementById("div_chk_ctl_"+tip);
var inputs = div_col.getElementsByTagName('input');

for (var i=0, iLen=inputs.length; i<iLen; i++) {
  // do stuff with inputs[i]
}

Upvotes: 0

Shadow Wizzard
Shadow Wizzard

Reputation: 66398

To avoid having such text nodes, don't have any space between the elements: (that space is the text nodes you see)

<div id="div_chk_ctl_adaugare" style="width: 100%; border: 0; padding: 0; background-color: white;"><div style="width: 99.5%-10px; border: 0; padding-left: 10px; background-color: white;"><input class="chck_nivel2_adaugare" id="chk_ctl_adaugare_conturi" name="chk_ctl_adaugare_conturi" type="checkbox" onChange="check_conturi_actiuni(\'adaugare\');" /><label for="pm_conturi_adaugare"><img id="pm_conturi_adaugare" name="plus" src="crm/imagini/plus-10.png" cursor="pointer"></img> Conturi </label></div>.....

If you prefer to have readable HTML, just check the node type:

if (div_col.childNodes[j].nodeType != 3) {
    //not text node, OK to go...
}

Upvotes: 1

Related Questions