js获取到dom对象打印长度为0

Question

var box = document.getElementsByName("id");
            console.log(box);
            var modify = document.getElementsByClassName("modify");
            console.log(modify);
            console.log(modify.length);
            for (var i = 0; i < modify.length; i++) {
                modify[i].onclick = function (e) {
                    console.log(e.target.parentElement.parentElement);
                    if (box[e.target.parentElement.parentElement.rowIndex].checked) {
                        alert("点击了第" + e.target.parentElement.parentElement.rowIndex + "行");
                    }
                    else {
                        alert("未选中");
                    }
                }
            }

运行后在控制台打印modify是一个集合，但是打印modify.length却为0。

这里的dom对象是从php打印出来的

while($stmt->fetch())
        {
            echo "<tr><td><input type=\"checkbox\" value=\"{$n}\" name=\"id\"></td><td>{$pro_name}</td><td>{$pro_count}</td>";
            echo "<td><button class=\"modify\">修改</button></td><td><button class=\"delete\">删除</button></td></tr>";
            $n++;
        }

Answer 1

一个猜想不一定对，
就是刚进这个页面执行到for循环的时候dom元素还没有加载出来所以这时候他的length是0,
至于为啥你看控制台展开里面有元素呢因为console输出的时候只会输出第一层然后你展开的时候才会加载里面的层。但是这个时候dom元素已经渲染出来了所以展开的时候里面是有元素的。
所以就出现了这么一个打印长度是0但是可以展开的情况，
你可以在输出长度的下面打一个debugger断点看一下当时的情况。