当前位置: 首页 > 图文教程 > 网络编程 > Javascript > document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all

Javascript
给初学者提供几本学习js值得看的书
Javascript----文件操作
Vml+Js算法:完成5个小球在网页运动(碰壁返回)的游戏,详细注释
Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条
Dhtml+Js算法:5个小球运动的简化版,变通实现更简单的飞行的图片
Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了
判断客户浏览器是否支持cookie
几种常用的表单输入判断
CSDN无限级树数据库版(ASP+ACCESS)
JavaScript 寫遊戲 : 俄羅斯方塊
JavaScript 寫遊戲 : 搬吖
JavaScript 遊戲 : 貪吃蛇
JavaScript 寫時鍾日曆
VML:经典的图片叠加效果(灰色调)
一个简单的仿xp的js下拉菜单
JScript 寫 sortNode
关于javascript中数组元素删除问题的讨论
IE中非模式对话框(showModelessDialog)应用
Dhtml:用ondrag事件简单的实现鼠标拖动物件.
对WebUI技术感兴趣的说

No. « 7 8 9 10 »

技术文章搜索

关键字

Javascript 中的 document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 261 ::
收藏到网摘: n/a

Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素

理解这句话可看以下：
例1（这个可以让你理解文档中哪些是对象）
　　

点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[/code]
document.all可以判断浏览器是否是IE
if(document.all){
alert("is IE!");
}
使用document.all注意的地方
代码1:
复制代码 代码如下:

<input name=aaa value=aaa>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa.value) //根据name取value
alert(document.all.bbb.value) //根据id取 value
</script>

代码2：
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)
复制代码 代码如下:

<input name=aaa value=a1>
<input name=aaa value=a2>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa(0).value) //显示a1
alert(document.all.aaa(1).value) //显示a2
alert(document.all.bbb(0).value) //这行代码会失败
</script>

代码3：
理论上一个页面中的id是互不相同的，如果出现不同tags有相同的id
复制代码 代码如下:

document.all.id 就会失败,就象这样：
<input id=aaa value=a1>
<input id=aaa value=a2>
<script language=Jscript>
alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2
</script>

代码4:
对于一个复杂的页面（代码很长，或者id是由程序自动产生),或着一个
javascript初学者写的程序，很有可能出现两个tags有相同id的情况。
为了编程的时候不出错，我推荐这样的写法：
复制代码 代码如下:

<input id=aaa value=aaa1>
<input id=aaa value=aaa2>
<input name=bbb value=bbb>
<input name=bbb value=bbb2>
<input id=ccc value=ccc>
<input name=ddd value=ddd>
<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script>

这样最安全.
以下是我自己的测试：
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。
如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

看上面的代码，当表单中有多个checkbox的时候是没有问题的，但当其中只有一个checkbox的时候就会有问题，即点全选的时候不起作用，因为当其中只有一个checkbox的时候不再用document.all["huang"][0].checked来访问，而是直接用document.all["huang"].checked来访问了
看当只有一个checkbox的时候应改成下面代码
复制代码 代码如下:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkall(){
var huang = document.all['huang'];
if(huang.length){
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}else{
huang.checked = true;
}
}
function centerall(){
if(huang.length){
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}else{
huang.checked = false;
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
[br]
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>

或者使用另一种形式，使用getElementsByTagName，如下：
复制代码 代码如下:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
[br]
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>