javascript - 用DOM中的getElement获取按钮赋值一个变量,代码只执行一次,但为什么能动态的获取?
怪我咯
怪我咯 2017-04-11 09:09:34
[JavaScript讨论组]

实验:
做一个微博发布的功能,textarea输入内容点击发布,新增一个子节点(包括输入的文字和删除按钮);点击删除,可以删除评论。

用一个变量dels,获取所有删除评论的按钮。

问题:这个变量dels只声明了一次
var dels = document.getElementsByClassName("bottom")[0].getElementsByTagName("button"),但为什么,每次点击发布按钮,都能动态的获取按钮的数量?

代码如下:

  var dels = document.getElementsByClassName("bottom")[0].getElementsByTagName("button");

 btn.onclick = function(){
//点击btn会添加一个li,包含文字和删除的button标签

console.log(dels.length);
}

按道理,dels声明在前面,程序只执行一次,为什么打印出来dels却能根据生成的li来获取?
是getElementsByTagName的特殊效果吗?

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(2)
阿神

dels代表document.getElementsByClassName("bottom")[0].getElementsByTagName("button")
你调用的是dels.length
相当于执行document.getElementsByClassName("bottom")[0].getElementsByTagName("button").length

阿神

html:

<input type="text">
<input type="text">
<input type="text">
<input id="btn" type="button">
<p id="myInputList"></p>

js:

var inputArr = [];
var len = document.getElementsByTagName("input").length;
for(var i = 0;i < len;i ++){
  inputArr.push(document.getElementsByTagName("input")[i].cloneNode());
}
var btn = document.getElementById("btn");
btn.onclick = function(){
    var a = document.createElement("input");
    document.getElementById("myInputList").appendChild(a);
    console.log(inputArr.length);
    console.log(document.getElementsByTagName("input").length);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号