js--document.all与getElementById、getElementsByName

最新推荐文章于 2022-06-09 09:27:18 发布
最新推荐文章于 2022-06-09 09:27:18 发布
阅读量142 收藏
点赞数
分类专栏： js 文章标签： JavaScript IE 编程 HTML 浏览器 ViewUI

Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素
[/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>

 

 

这样最安全.
以下是我自己的测试：

 
<html>
<head>
<title>
document.all test
</title>
<script language="javascript">
function view()
{
/*
//通过name两种访问格式
alert(document.all.aaa.value);
alert(document.all["aaa"].value);
//通过id的两种访问格式
alert(document.all.ccc.value);
alert(document.all["ccc"].value);
*/
//当一页中存在两个name相同的input时不能使用上面的访问方法，因为将返回undefine,请使用下面方式访问
alert(document.all.aaa(0).value);
alert(document.all.aaa(1).value);
//安全的写法
alert(document.all("aaa",0).value);
alert(document.all("aaa",1).value);
}
</script>
</head>
<body>
<form name="form1" id="f1">
<input type="text" name="aaa" >
<input type="text" name="aaa" id="ccc">
<input type="button" name="bbb" value="click" οnclick="view();">
</form>
</body>
</html>

 

 

从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。
如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？

 

 

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

看上面的代码，当表单中有多个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>

 

 

 

 

 

daidalei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById
09-06
在HTML文档对象模型（DOM）中，有三种主要方法用于查找HTML元素：`document.all`，`getElementById()`，`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景，理解它们的区别对于编写...
JavaScript获取页面元素的方法document.getElementById、document.getElementsByName、document.getElementsByTagName
浩angel的博客
12-28 4732
document.getElementById('参数')：根据id获取元素，由于id是唯一的，获取到的是一个元素。 document.getElementsByName('参数')：根据name获取元素，由于name不是唯一的（比如不同的input的name可以相同），获取到的是元素数组。 document.getElementsByTagName('参数')：根据tagName获取元素，由于tagName不是唯一的，获取到的是元素数组。 例：页面有如下3个元素 <input type="t
关于js的document.getElementByTagName的一些玩意
m0_64288219的博客
06-09 3342
就是我怎么点安装按钮，son元素的蓝条的宽度就是没有改变，当时我百思不得其解。 我首先怀疑没有获取btn元素，但通过控制台输出btn,可以看出是获得的。 也就是这匆匆一瞥，让我错过了正确答案。 通过图片可以看出，getElementsByTagName返回是数组集合形式。 所以我们只需加上btn[0].onclick=functin(){}即可当时我还试着给button加上id,通过getElementsById来调用，测试可行。我还以为系统出了bug，心想以后要少用getElementsByTagNam
js document.getElementById的用法详解
Finder_Way
12-14 1万+
语法：oElement = document . getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。 如果无符合条件的对象，则返回 null 。
js中document.getElementById()用法
lyhmyway的专栏
03-03 6万+
dom标准里面的  获取当前文档中指定id的元素 if (document.getElementById("regjm").value != document.getElementById("regjm1").value ) {    alert("提示：请输入有效的认证码");    document.getElementById("regjm1").focus();    retur
document.getElementById
xx_yan的博客
03-28 2万+
var element = document.getElementById(id); 因为Id具有唯一性，所以这个方法用来查找页面中的某一个元素。 无Id元素的查找可以使用CSS选择器 querySelector() 参数 id 大小写敏感的字符串，指代被查找元素 返回值 elemnt 一个DOM中匹配id的Element对象。未查找到此id的Element时，返回null。 注意 get...
document.all 用法
08-26 1989
使用document.all注意的地方 代码1: 复制代码 代码如下:代码2： 但是常常name可以相同(如:用checkbox取用户的多项爱好的情况) 复制代码 代码如下:
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页
09-06
本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合，它包含了HTML文档中所有的元素，...
JS的document.all函数使用示例
10-26
例如，使用`document.getElementById`替代`document.all`，`document.getElementsByName`替代`document.all`对name属性的访问。 五、更安全的`document.all`使用示例 在复杂或可能有重复ID的情况下，可以采用以下...
JS中document.getElementById()用法
qq_47776903的博客
03-01 5341
getElementById 方法 返回具有指定 ID 属性值的第一个比如说有个网页中有个input 框的id叫FAX getElementById(FAX)就能得到这个input 框的对象,并使用input 框的所有属性和方法 这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。 <input type="text" id="FAX" name="F
document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all
仰望者！
12-18 1911
 Document.all： Document.all[]是文档中所有标签组成的一个数组变量，包括了文档对象中所有元素理解这句话可看以下：例1（这个可以让你理解文档中哪些是对象）　　"-//W3C//DTD XHTML 1.0 Transitional//EN"　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">　　"http:/
document.all与getElementById、getElementsByName、getElementsByTagName用法区别
阿阳天
01-26 190
document.all与getElementById、getElementsByName、getElementsByTagName用法区别: 1.Document.all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问理解这句话可看以下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/...
javascript DOM getElementByTagName Tab选项卡
weixin_30924087的博客
05-25 121
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>getElementByTagName Tab选项卡</title> <style t...
JavaScript学习笔记——获取元素的动态方法getElementByTagName
齐在的专栏
08-19 4614
获取元素的第一个方法（静态方法）：对于设置了id的元素，使用 var oUl=document.getElementById('list');//#list{} list是某个ul元素的id名 获取元素的第二个方法（动态方法）：对于页面上所有的某类元素，通过页面去找： document.getElementsByTagName('li');//li {} 区别：1. 第一种方法前面只...
document.getElementById 你真正了解了吗？
热门推荐
冬天的蚊子
03-25 17万+
  text1：      text2：        我在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？我本意是按钮1返回第一个文本框的值，按钮2返回个文本框的值。结果是两个按钮都返回了第一个文本框的值。说明ie执行document.getElementById(elementName)的时候，返回的是第一个name或者
JavaScript中document.getElementById解析
Quest_sec的博客
03-31 6307
话外：函数名一定要有大写字母=.= JavaScript中document.getElementById和document.write 1.JavaScript访问某个HTML元素，可以使用document.getElementById（id）方法。 如 &amp;lt;body&amp;gt; &amp;lt;p id=&quot;demo&quot;&amp;gt;Hello&amp;lt;/p&amp;
js中document.getElementById("id").value+1问题
huazicomeon的博客
07-16 6959
document.getElementById("id").value的数据类型是不确定的 如果你是要相加用这样的写法比较好 document.getElementById("id").value=document.getElementById("id").value*1+1; 字符串拼接的话用这个 document.getElementById("id").value=document.
var num = document.getElementById
最新发布
08-30
根据代码中的引用[2]，"var num = document.getElementById"是JavaScript中获取特定ID元素的方法。这段代码中通过使用getElementById方法，将ID为"zhi"的input元素赋值给变量num。也就是说，通过这段代码可以获取到ID为"zhi"的input元素对象。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [document.getElementsByName和document.getElementById 在IE与FF中不同实现](https://download.csdn.net/download/weixin_38609571/14005650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [HTML中嵌套的JavaScript语言 document.getElementById（“”）函数的使用](https://blog.csdn.net/qq_38261445/article/details/84201076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值