The difference between the usage of document.all and getElementById, getElementsByName, getElementsByTagName-JS Tutorial-php.cn

To understand this sentence, please see the following:
Example 1 (this allows you to understand which objects are in the document)

 
<!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(&#39;document.all.length=&#39;+origLength+"[br /]"); 
　　for (i = 0; i < origLength; i++) 
　　{ 
　　document.write("document.all["+i+"]="+document.all[i].tagName+"[br /]"); 
　　} 
　　//--> 
　　</script> 
　　</body> 
　　</html>

Copy after login

The output result

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

Copy after login

can be passed ID, NAME or INDEX attributes to access a specific element
Example 2 (access a specific element)

<!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]就可以访问了。

Copy after login

You can use document.all["element name"].Attribute name="attribute value" " to dynamically change the properties of an element. With this statement, you can create many dynamic web page effects, such as: dynamically changing pictures, dynamically changing the background of text, dynamically changing the background of web pages, dynamically changing the size of pictures, dynamically changing the size and color of text, etc.

<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>

Copy after login

document.all can determine whether the browser is IE
if(document.all){
alert("is IE!");
}
Points to note when using document.all
Code 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>

Copy after login

Code 2:
But often the name can be the same (for example: when using checkbox to retrieve multiple hobbies of the user)

<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>

Copy after login

Code 3: Theoretically, the ids in a page are different from each other. If different tags have the same 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>

Copy after login

Code 4:
For a Complex pages (the code is very long, or the ID is automatically generated by the program), or a
For programs written by JavaScript beginners, it is very likely that two tags will have the same ID.
In order to avoid errors when programming, I recommend writing like this:

<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>

Copy after login

This is the safest.
The following is my own test:

 
<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>

Copy after login

From above You can see that when we use document.all, we may return one value or multiple values, so we must judge the length before using it, otherwise an error will occur.
Such as the following question: Two functions process multiple checkboxes, and perform the functions of selecting all and deselecting all respectively. What problems will occur if you use them as follows?

 
<HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function checkall(){ 
var huang = document.all[&#39;huang&#39;]; 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = true; 
} 
} 
} 
function centerall(){ 
var huang = document.all[&#39;huang&#39;]; 
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>

Copy after login

Looking at the above code, there is no problem when there are multiple checkboxes in the form, but there will be a problem when there is only one checkbox, that is, it does not work when you click to select all. , because when there is only one checkbox, document.all["huang"][0].checked is no longer used to access it, but document.all["huang"].checked is used to access it directly.
When there is only one checkbox, it should be changed to the following code

<HTML> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function 
checkall(){ 
var huang = document.all[&#39;huang&#39;]; 
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>

Copy after login

or use another form, use getElementsByTagName, as follows:

<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>

Copy after login