javascript - 遍历通过父节点的children属性遍历子节点时出现几个输出underfined

Question

<p>
    很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现:
</p>
<script>
    var lan = document.querySelector('#lan');
    for(var i in lan.children){
        console.log(lan.children[i].textContent);
    }
    console.log(lan.children.length);

</script>

这三个错误的输出的行号和我输出是同一行

Answer 1

因为你这个不是数据 遍历的时候有一些属性没有你后面写的这个方法 可以采用 Array.prototype.splice.call[lan.children] 进行操作 或者使用for(i = 0,len = lan.length)

Answer 2

<script>
    var lan = document.querySelector('#lan');
    for(var i in lan.children){
        console.log(i);//这里能看到遍历出来的属性值
        console.log(lan.children[i].textContent);
    }
    console.log(lan.children.length);

</script>

lan.children获取一个HTMLCollection对象
for(var i in lan.children)遍历取出其中的每一个可遍历属性
这里的属性不仅有下标值，还有`length属性及item 和 namedItem 这2个属性
所以就会出现你描述的问题了~~~
可以如下修改:

<script>
    var lan = document.querySelector('#lan');
    var child= lan.children;
    for(var i=0;i< child.length;i++){
        console.log(i);//这里能看到遍历出来的属性值
        console.log(child[i].textContent);
    }
    console.log(lan.children.length);

</script>