JS取DOM的问题，请高手指点。

fccfcc1234 2012-09-22 03:42:09



<HTML>

 <HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

    var items = document.getElementsByName("selectThings");

    alert(items.length);

//-->

</SCRIPT>

 <BODY>

  <input type="checkbox" name="selectThings" value="" onclick="selectCheck(this)" />selectThings</br>

  <input type="checkbox" name="selectThings" value="" onclick="selectCheck(this)" />selectThings</br>

  <input type="checkbox" name="selectThings" value="" onclick="selectCheck(this)" />selectThings</br>

  <input type="checkbox" name="selectThings" value="" onclick="selectCheck(this)" />selectThings</br>

  <input type="checkbox" name="selectThings" value="" onclick="selectCheck(this)" />selectThings</br>

 </BODY>

 <SCRIPT LANGUAGE="JavaScript">

 <!--

	alert(items.length);

 //-->

 </SCRIPT>

</HTML>

以上代码，初始化执行结果是第一个alert出0，第二个alert出5.有人知道为什么吗？

...全文

222 19 打赏收藏转发到动态举报

写回复

用AI写文章

19 条回复

切换为时间正序

请发表友善的回复…

发表回复

scscms太阳光 2012-09-25

打赏
举报

document.getElementsByName("selectThings")就是一群对象的数组
var items = document.getElementsByName("selectThings");后可用两种方法访问：
items[0]或document.getElementsByName("selectThings")[0];

scscms太阳光 2012-09-25

打赏
举报

var items = document.getElementsByName("selectThings");
对items来说是全局变量，但它属于一个对象，对象里的属性是可以变的。就如定义一个数组，数组是全局变量，但数组下标与内容是可以变化的呀。

scscms太阳光 2012-09-24

打赏
举报

无语...

对象的值当然是每次都要查询一下，又不是常量变量。

fccfcc1234 2012-09-24

打赏
举报

[Quote=引用 15 楼的回复:]

无语...

对象的值当然是每次都要查询一下，又不是常量变量。
[/Quote]
var items = document.getElementsByName("selectThings");
这句话难道不算是定义全局变量吗？

fccfcc1234 2012-09-23

打赏
举报

所以结论就是每次调用items.length的时候相当于是调用了
document.getElementsByName("selectThings").length
相当于在JS里像这样定义全局变量除了写代码的时候省事和维护性之外，对性能是完全没有意义的。
本来想的是上面定义了对象如果其他地方用的话可以不用重新从DOM树里去查找一边。
先结贴。有不同意见的继续讨论。

泡泡鱼_ 2012-09-23

打赏
举报

还没结贴呢，1楼和5楼都说那么清楚了的呀

Lz，你的问题在于你没有理解到代码的含义

var items = document.getElementsByName("selectThings").length;

alert(items);

如以上定义，则只要是你将它放在最前面，因为当时元素尚未加载，得到0，这样申明的话，这个长度做为一个全局变量，那就永远是0了，之后你不管在什么地方调用它都是0

但你定义的是

var items = document.getElementsByName("selectThings");

也就是说，定义的是个对象集合，在元素尚未加载时alert(items.length);就相当于alert(document.getElementsByName("selectThings").length)，这时候自然为0，等到后面你再alert(items.length);也是一样的道理，但不同的是元素已经被加载，因此长度自然不为0

色拉油 2012-09-23

打赏
举报

js 和HTML 浏览器解释的时候不区分，从上到下顺序解释执行

road_16 2012-09-22

打赏
举报

你定义在<scrip>var items = document.getElementsByName("selectThings");</script>中的items是一个全局变量，当第二次alert(items.length)时，会先去找items存不存在，这时候input标签已经加载完了，再次去找var items = document.getElementsByName("selectThings");所以结果就是5了

chen_ya_ping 2012-09-22

打赏
举报

应该是调用length属性的时候，就去会执行先前定义好的document.getElementsByName("selectThings")

fccfcc1234 2012-09-22

打赏
举报

[Quote=引用 6 楼的回复:]

引用 5 楼的回复:

就算是保存引用，难道说浏览器在加载HTML的时候还会来改变JS变量里的值？

对，有些属性是动态计算的，每次使用都是重新计算，
document.getElementsByName("selectThings").length
这个就是每次使用都是计算的
[/Quote]
动态计算的话难道是var items = document.getElementsByName("selectThings");的时候吧items的计算语句保存下来，然后在取length的时候再重新计算document.getElementsByName("selectThings").length;吗？
重新计算length可以这么说，但是如果items这个集合对象没变的话length是不会变的。所以说你的意思是说浏览器解析HTML的时候碰到名字叫selectThings的节点就往对象items集合里添加一个对象？

fccfcc1234 2012-09-22

打赏
举报

请大家看清楚问题。我的问题是items在第一次赋值并打印其长度为0之后并没有对其重新赋值。然而长度却从0变成了5.
那么到底是谁，在什么时候改变了items的长度。

yangbenmu1988 2012-09-22

打赏
举报

[Quote=引用 1 楼的回复:]
你要明白js是解释语言，加载到哪就运行到哪。在没有输出input前你就统计长度，所以是0 等后面已经加载了input所以就显示了5
[/Quote]

1楼说的正确。第一个length=0是代表这个对象不存在（这里是没加载），后面的就不要说了。所以判断一个节点对象是否存在可以用它的length属性是否大于1来判断。

孟子E章 2012-09-22

打赏
举报

[Quote=引用 5 楼的回复:]

就算是保存引用，难道说浏览器在加载HTML的时候还会来改变JS变量里的值？
[/Quote]

对，有些属性是动态计算的，每次使用都是重新计算，
document.getElementsByName("selectThings").length
这个就是每次使用都是计算的

fccfcc1234 2012-09-22

打赏
举报

就算是保存引用，难道说浏览器在加载HTML的时候还会来改变JS变量里的值？

fccfcc1234 2012-09-22

打赏
举报

[Quote=引用 3 楼的回复:]

javascript是嵌入在html中的，浏览器解析网页(html)代码的时候是从上而下执行的。所有当执行到第一个alert的时候，html文档(DOM)并没有加载完成，<input>标签现在根本存在DOM中，所有获取的长度为0,说到这儿应该明白是怎么回事儿了吧.
运用楼上的方法可以解决问题，代码的含义：在浏览器完成对象的装载后立即触发。
[/Quote]
但是第二个alert之前并没有执行var items = document.getElementsByName("selectThings");对其重新赋值。
难道说第一次items取到之后不是保存的items的副本，而是保存了一个引用？

copaer 2012-09-22

打赏
举报

javascript是嵌入在html中的，浏览器解析网页(html)代码的时候是从上而下执行的。所有当执行到第一个alert的时候，html文档(DOM)并没有加载完成，<input>标签现在根本存在DOM中，所有获取的长度为0,说到这儿应该明白是怎么回事儿了吧.
运用楼上的方法可以解决问题，代码的含义：在浏览器完成对象的装载后立即触发。

泡泡鱼_ 2012-09-22

打赏
举报

[Quote=引用 1 楼的回复:]
你要明白js是解释语言，加载到哪就运行到哪。在没有输出input前你就统计长度，所以是0 等后面已经加载了input所以就显示了5
[/Quote]
+1。楼上讲的是原理了

你若想得到的全是实际长度，你应该

window.onload=function(){

    var items = document.getElementsByName("selectThings");

    alert(items.length);

}

scscms太阳光 2012-09-22

打赏
举报

你要明白js是解释语言，加载到哪就运行到哪。在没有输出input前你就统计长度，所以是0 等后面已经加载了input所以就显示了5

在DOM里面操作textarea里面的字符，是比较麻烦的。于是我有这个封装分享给大家，测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。注意：在firefox下添加字符串的时候有个bug 就是scrollTop 会等于0，当然解决了，但是不够完美。如果有高手也研究过，麻烦指点下。代码如下: var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ getCursorPosition: function(t){ if (

虽然你现在看来没什么用，当要用的时候又到处找资料，还不如现在收集一下。在DOM里面操作textarea里面的字符，是比较麻烦的。于是我有这个封装分享给大家，测试过IE6,8, firefox ,chrome, opera , safari。兼容没问题。注意：在firefox下添加字符串的时候有个bug 就是scrollTop 会等于0，当然解决了，但是不够完美。如果有高手也研究过，麻烦指点下。代码如下: var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */

javascript基础二JavaScript DOM编程 javascript基础二JavaScript DOM编程今天讲解的内容更多的是要求大家要细心。好，我们接着来看下JS中的字符串 substr(startIndex,len)//从startIndex开始，截取len个字符。 ...

摘要：本文讨论关于js中万能的调试函数alert的长度问题前言： js中万能的调试工具alert可谓是屡试不爽的利器，不过今天在调试的时候意外发现一个很有意思的问题，在这里和大家一起讨论。鉴于作者js菜鸟一枚，还望高手指点一二。 alert出问题了？今天下午在把ajax返回的数据拼装成字符串，以便减少对DOM的多次插入问题的时候，alert拼装成的字符串的时候发现，字符串不完整，貌...

新手PHP代码问题，求解关于simple_html_dom入门PHP中，不知道为什么循环读取数据无法实现，始终是重复读取同一个页面的数据，高手给指点一下，始终没招到代码的问题。header("Content-type: text/html; charset=utf-8");include('simple_html_dom.php');echo '';for($page = 1;$page <...

JavaScript

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章