Question

我正在尝试获取div元素的所有子元素（下面的代码），以便创建一个机制，在没有选中任何子元素时取消选中父元素。所有的孩子都在同一个div中但是当我使用div.childNodes [0]时，例如我得到一个Object Text元素而不是Div元素。

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的东西吗？我可以使用其他任何东西吗？

Answer 1

为了避免使用这样的文本节点，元素之间没有任何空格:(该空间是您看到的文本节点）

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

Answer 2

如果您希望所有输入都是元素的后代，而不仅仅是直接子元素，请使用 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]
}

为什么我不能正确获取这个div元素的childNodes？

2 个答案: