爲什麼我無法正確獲取此div元素的childNodes？

我試圖讓一個div元素的所有孩子（代碼如下）爲了創建一個機制，取消選中沒有任何一個孩子的父複選框。所有的孩子都在同一個div中，但是當我使用div.childNodes [0]時，例如我得到一個Object Text元素而不是Div元素。爲什麼我無法正確獲取此div元素的childNodes？

的HTML代碼：

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

未註釋的警報打印[對象文本。有沒有關於我在這裏失蹤的childNodes？我可以使用其他東西嗎？

來源

2011-12-08 Bogdan

爲了避免這樣的文本節點，不具備的要素之間的任何空間（這個空間就是你看到的文字節點）

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

如果你喜歡有可讀的HTML，只是檢查節點類型：

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

來源

2011-12-08 08:08:43

好吧，明白了。我認爲HTML忽略空格？ – Bogdan

@Bogdan瀏覽器在呈現HTML時忽略了空格。在幕後，在臭名昭着的「DOM樹」中，這些空白不會被忽略。 –

如果你想所有的元素的後代的投入，而不僅僅是直接的孩子，使用的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] 
}

來源

2011-12-08 08:45:30 RobG

謝謝，但我真的只想要直接的孩子。這是一個巨大的檢查清單分層樹。爲了舉例，我在這裏發佈的僅僅是兩個元素。 – Bogdan

如果你刪除了所有多餘的標記並且只發布了你正在處理的結構，這將非常有幫助。 – RobG

爲什麼我無法正確獲取此div元素的childNodes？

回答

相關問題