简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
ホームページ
記事
に質問
コース
特集
ダウンロード
ゲーム
辞書
最近の更新

ホームページ  >  記事  >  ウェブフロントエンド  >  document.all と getElementById、getElementsByName、getElementsByTagName の使用法の違い

document.all と getElementById、getElementsByName、getElementsByTagName の使用法の違い

PHP中文网
PHP中文网オリジナル
2016-05-16 18:57:371045ブラウズ

この文を理解するには、次を参照してください。
例 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(&#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>

出力結果

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["要素名"].Attribute を使用できますname="attribute value" " を使用して要素のプロパティを動的に変更します。このステートメントを使用すると、画像の動的変更、テキストの背景の動的変更、Web ページの背景の動的変更、画像のサイズの動的変更、テキストのサイズと色の動的変更など、多くの動的 Web ページ効果を作成できます。など。 

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

ただし、多くの場合、名前は同じになる可能性があります (例: チェックボックスを使用して複数を取得する場合)ユーザーの趣味) 

<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 を持つ場合、ページ内の 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 の初心者が作成したプログラムの場合、2 つのタグが同じ 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 を使用すると、1 つまたは複数の値を返すことができるため、使用する前に長さを判断する必要があることがわかります。そうしないと、エラーが発生します。

次のような質問です。 2 つの関数は、複数のチェックボックスを処理し、それぞれ全選択と全選択解除の機能を実行します。これらを次のように使用すると、どのような問題が発生しますか? 

 
<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>
上記のコードを見ると、フォーム内に複数のチェックボックスがある場合には問題ありませんが、チェックボックスが 1 つしかない場合には問題が発生します。つまり、次の場合に機能しません。クリックしてすべてを選択します。チェックボックスが 1 つしかない場合、document.all["huang"][0].checked はアクセスに使用されなくなります。それを直接。

チェックボックスが 1 つしかない場合は、次のコードに変更する必要があります 

<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>
か、別の形式を使用して、次のように getElementsByTagName を使用します:

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript パブリック ドラッグ アンド ドロップ クラス code_javascript スキル次の記事：JavaScript パブリック ドラッグ アンド ドロップ クラス code_javascript スキル

関連記事

続きを見る