使用`.childNodes`从javascript访问HTML DOM元素

Question

我想知道.childNodes属性，我有下面的代码，由于某种原因，我得到18个孩子，而6个是HTMLInputElement s按预期，其余的是{{1 }}。这是关于什么的？是否有一种有效的方法来迭代undefined元素？

input

Answer 1

文本节点，即使它们只由空格组成，也将包含在输出中，br元素也是如此。

如果您想要所有元素，请使用.children，包括br。这将只为您提供元素节点。我认为旧的IE错误地包含注释节点，但你的代码中没有，所以没有问题。

或者你可以......

form.getElementsByTagName('input')

...假设您只想要input元素。

除此之外：您忘了关闭form元素。

Answer 2

childNodes也返回文本节点;这可能是你困惑的根源。

要遍历所有childNodes，但只关注INPUT，只需检查节点的tagName属性即可。如果节点是文本节点，则它不具有tagName，如果节点具有tagName，则可以检查tagName ==“input”。

Answer 3

使用form.elements获取所有表单字段，或使用form.getElementsByTagName('INPUT')获取表单中的INPUT元素。

Answer 4

form.elements是访问表单中每个元素的快捷方式 -

window.onload = function(e){
        var s='', form = document.getElementById('myForm'),
        L=form.elements.length;
        s=L+'\n';
        for(var i=0;i<L; i++){
            s+= (form[i].name || form[i].id)+'='+form[i].value+'\n';
        }
        alert(s);
    }