首页 / JAVASCRIPT / document.all与getElementById、getElementsByName、getElementsByTagName用法区别

document.all与getElementById、getElementsByName、getElementsByTagName用法区别

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了document.all与getElementById、getElementsByName、getElementsByTagName用法区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7906字，纯文字阅读大概需要12分钟。

内容图文

document.all与getElementById、getElementsByName、getElementsByTagName用法区别

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
　　<html xmlns="http://www.w3.org/1999/xhtml"> 
　　<head> 
　　<title>Document.All Example</title> 
　　<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
　　</head> 
　　<body> 
　　<h1>Example Heading</h1> 
　　<hr /> 
　　<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p> 
　　<p>Yet another <em>paragraph.</em></p> 
　　<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p> 
　　<hr /> 
　　<script type="text/javascript"> 
　　<!-- 
　　var i,origLength; 
　　origLength = document.all.length; 
　　document.write('document.all.length='+origLength+"[br /]"); 
　　for (i = 0; i < origLength; i++) 
　　{ 
　　document.write("document.all["+i+"]="+document.all[i].tagName+"[br /]"); 
　　} 
　　//--> 
　　</script> 
　　</body> 
　　</html>

输出结果

Example Heading 
　　This is a paragraph. It is only a paragraph. 
　　Yet 
another paragraph. 
　　This final paragraph has special emphasis. 
　　document.all.length=18 
　　document.all[0]=! 
　　document.all[1]=HTML 
　　document.all[2]=HEAD 
　　document.all[3]=TITLE 
　　document.all[4]=META 
　　document.all[5]=BODY 
　　document.all[6]=H1 
　　document.all[7]=HR 
　　document.all[8]=P 
　　document.all[9]=EM 
　　document.all[10]=EM 
　　document.all[11]=P 
　　document.all[12]=EM 
　　document.all[13]=P 
　　document.all[14]=EM 
　　document.all[15]=EM 
　　document.all[16]=HR 
　　document.all[17]=SCRIPT

可以通过ID，NAME或INDEX属性访问某个具体的元素
例2（访问一个特定元素）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
　　"http://www.w3.org/TR/html4/loose.dtd"> 
　　<html> 
　　<head> 
　　<meta http-equiv="Content-Type" content="text/html; 
charset=gb2312"> 
　　<title>单击DIV变色</title> 
　　<style 
type="text/css"> 
　　<!-- 
　　#docid{ 
　　height:400px; 
　　width:400px; 
　　background-color:#999;} 
　　--> 
　　</style> 
　　</head> 
　　<body><p id="docid" 
name="docname" onClick="bgcolor()"></p> 
　　</body> 
　　</html> 
　　<script language="javascript" 
type="text/javascript"> 
　　<!-- 
　　function bgcolor(){ 
　　document.all[7].style.backgroundColor="#000" 
　　} 
　　--> 
　　</script> 
　　上面的这个例子让你了解怎么访问文档中的一个特定元素，比如文档中有一个DIV 
　　<p 
id="docid" name="docname"></p>，你可以通过这个DIV的ID，NAME或INDEX属性访问这个DIV： 
　　document.all["docid"] 
　　document.all["docname"] 
　　document.all.item("docid") 
　　document.all.item("docname") 
　　document.all[7] 
　　document.all.tags("p")则返回文档中所有DIV数组，本例中只有一个DIV，所以用document.all.tags("p")[0]就可以访问了。

可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等

<script language="JavaScript"> 
function cardClick(cardID){ 
var 
obj; 
for (var i=1;i<7;i++){ 
obj=document.all("card"+i); 
obj.style.backgroundColor="#3A6EA5"; 
obj.style.color="#FFFFFF"; 
} 
obj=document.all("card"+cardID); 
obj.style.backgroundColor="#FFFFFF"; 
obj.style.color="#3A6EA5"; 

for (var i=1;i<7;i++){ 
obj=document.all("content"+i); 
obj.style.display="none"; 
} 
obj=document.all("content"+cardID); 
obj.style.display=""; 
} 
</script>

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" onclick="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>

内容总结

以上是互联网集市为您收集整理的document.all与getElementById、getElementsByName、getElementsByTagName用法区别全部内容，希望文章能够帮你解决document.all与getElementById、getElementsByName、getElementsByTagName用法区别所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/308077.html

来源：【匿名】

【上一篇】javascriptStringBuilder类实现_javascript技巧【下一篇】javascript 怎么调用php方法

更多 ►

【document.all与getElementById、getElementsByName、getElementsByTagName用法区别】教程文章相关的互联网学习教程文章

QML中的JavaScript用法详解

熟悉JavaScript的应该都了解Netscape公司，一代骄子虽然倒下了，却给后人留下了最为珍贵的产品和经验，在互联网发展史上享有举足轻重的地位，这里就不讲故事了，虽然很精彩，从未被磨灭。QML是对JavaScript的扩展，提供了JS主机环境，用法相似，但有些地方与浏览器/服务器端提供的JS主机环境（如Node.js）是不同的，用起来又有一些限制，下面列举一些常用的方法。1、QML文件中的JS表达式初始化时属性绑定——// Property.qmlimport...

JavaScript键盘事件常见用法实例分析

JavaScript 键盘事件有以下3种keydown键盘按键按下（如果按着不放，会持续触发该事件），可以捕获组合键。keypress键盘非功能按键按下（在keydown之后触发，如果按着不放会持续触发该事件），只能捕获单个键。keyup键盘按键弹起，可以捕获组合键。全局事件对象eventevent.ctrlKey功能键”ctrl”键是否按下。event.altKey功能键”alt”键是否按下。event.shiftKey功能键”shift”键是否按下。event.keyCode键盘按键键码。event.char...

javascript中闭包的2种经典用法

闭包这个东西，网上有很多介绍资料。个人看了很多，还是一知半解。这里不做理论介绍，直接给出2个例子。代码1：记录函数被调用的次数function a() {var i = 0;function b(){return ++i;}return b; }var c = a(); c();//1 c();//2这种方式类似C语言中的private static变量，能够保持局部变量的内存不释放。代码2：正确给DOM注册事件处理函数<body><input type="button" id="b1" value="1"><input type="button" id="b2" value="2"...

JS中的call()方法和apply()方法用法总结

JS中的call()方法和apply()方法用法总结 : 参考： https://blog.csdn.net/ganyingxie123456/article/details/70855586原文：https://www.cnblogs.com/wfblog/p/9169026.html

JavaScript toFixed 用法【代码】【图】

在JS中进行乘法运算时我们又是会遇到一下情况<input type="text" id="num1" value="" /> * <input type="text" id="num2" value="" /><input type="button" id="tt" value="="/><input id="result" type="text" value="" /> $(function(){$("#tt").click(function(){var num1=$("#num1").val();var num2=$("#num2").val();var result=num1*num2;$("#result").val(result);});});结果：正确的结果是 30.8 此时我们应该用toFixed(...

javascript call apply bind caller callee 的用法

在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢。在说区别之前还是先总结一下三者的相似之处：1、都是用来改变函数的this对象的指向的。2、第一个参数都是this要指向的对象。3、都可以利用后续参数传参。那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, ...

JavaScript BOM Cookie 的用法【代码】

JavaScript CookieCookie是计算机上存储在小文本文件中的数据。当Web服务器将网页发送到浏览器时，连接将关闭，服务器将忘记用户的所有内容。发明Cookie是为了解决“如何记住用户信息”的问题：当用户访问网页时，他/她的名字可以存储在cookie中。下次用户访问该页面时，cookie会“记住”他/她的名字。Cookie以键值对形式保存，如：username = John Doe当浏览器从服务器请求网页时，属于该页面的cookie将添加到请求中。这样，服务器...

javascript中函数定义调用及封闭，闭包用法总结

1， javascript函数定义调用 function test(){ alert("aaa"); } var a=function(){ alert(‘aa‘); } 2，javascript函数参数 function test(a,b){ return a+b; } 3,javascript封闭函数 (function (){ alert(‘www.96net.com.cn‘); })(); 4, javascript 闭包函数函数里面嵌套函数 function a{ function b(){ } return b; } 原文：https://www.cnblogs.com/96net/...

JavaScript中return的用法详解

1、定义：return 从字面上的看就是返回，官方定义return语句将终止当前函数并返回当前函数的值，可以看下下面的示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function func1(){ while (true){ return 1; } }; alert(func1()); </script></head><body></body></html>可以看到我在函数里面写了个死循环，然后在下...

JS Replace 详细用法讲解

javascript 之 this 用法【代码】

参考视频：http://www.imooc.com/video/6430JavaScript中的this比较灵活，也是让很多初学者摸不到头脑，那么根据在不同的环境下，在同一个函数，不同的调用方式下，那么这个this也有可能是不同的。我们先来看，全局作用于下的this。全局的this(浏览器)console.log(this.document===documet);//trueconsole.log(this===window);//truethis.a=37;console.log(window.a);//37全局作用域下的this一般指的是全局对象，在浏览器里面一般指...

JavaScript随笔之——函数用法【代码】

1、reduce函数用法：$(function(){// arrowMouseOver();Array.prototype.reduce=null; //将内置reduce函数设置为nullvar eleResult=document.getElementById("result");console.log=function(result){var text=document.createTextNode(result);var br=document.createElement("br");//var name=document.createAttribute("data-name"); eleResult.appendChild(text);eleResult.appendChild(br);//br.setAttribute(name,"z...

JavaScript 用法

JavaScript 用法HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 标签如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。<script> 和 </script> 之间的代码行包含了 JavaScript:<script>alert("我的第一个 JavaScript");</script>您无需理解上面的代码。只需明白，浏览器会解释并执行位...

IFE_part2_JavaScript_DOM的具体用法【代码】

// DOM// 为element增加一个样式名为newClassName的新样式 // 另一种方法，element.classList.add(‘newClassName‘),但是存在兼容性问题（不兼容IE10以下） function addClass(element, newClassName) {if (!hasClass(element, newClassName)) {element.className += " " + newClassName;// element.className += " "// element.className += newClassName} }// 移除element中的样式oldClassName // 也可以这样子写 // function r...

javascript中的location.href有很多种用法【代码】

javascript中的location.href有很多种用法，主要如下。self.location.href="/url" 当前页面打开URL页面 location.href="/url" 当前页面打开URL页面 windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。 this.location.href="/url" 当前页面打开URL页面 parent.location.href="/url" 在父页面打开新页面 top.location.href="/url" 在顶层页面打开新页面如果页面中自定义了frame，那么可将parent self top换为自定...

首页 / JAVASCRIPT / document.all与getElementById、getElementsByName、getElementsByTagName用法区别

document.all与getElementById、getElementsByName、getElementsByTagName用法区别

内容导读

内容图文

内容总结

内容备注

内容手机端

【document.all与getElementById、getElementsByName、getElementsByTagName用法区别】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程