前端fgm练习:不去掉空格,子节点的个数为何不对?

写了fgm的第一个练习,代码贴在下面,问题是JavaScript中的注释。还请各位朋友指点迷津,感激不已。

HTML

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>控制div属性</title>
        <link rel="stylesheet" href="1_div.css">
    </head>
    <body>
        <div id="btn"><input type="button" value="变宽"><input type="button" value="变高"><input type="button" value="变色"><input type="button" value="隐藏"><input type="button" value="重置"></div>
        <div id="change" class="change"></div>
        <script src="1_div.js"></script>
    </body>
</html>

CSS

#btn {
    width: 240px;
    margin: 0 auto;
}
input {
    margin: 0 2px;
}
.change {
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 10px auto;
    display: block;
}
.change0 {
    width: 200px;
}
.change1 {
    height: 200px;
}
.change2 {
    background-color: red;
}
.change3 {
    display: none;
}
.change4 {
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 10px auto;
    display: block;
}```

## JavaScript

window.onload = function(){
var btn=document.getElementById("btn").childNodes;
// 不太懂为什么不去掉btn里面的空格,这里输出btn的长度竟然是11,而不是5
var change = document.getElementById("change");
for(var i=0;i<5;i++){
btn[i].onclick = (function (n){
return function(){
change.className = change.className + (" change"+n);
}
})(i);
}
}

2个回答

使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息;children属性比childNodes方便得多,它不会返回文本节点。因此只需要一行代码就可以完成上面的操作

DGT4720
denguing 谢谢你呀!我在后面的练习中也看到了这个问题的答案,但是忘记回来删除问题了(其实是懒~)
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问