document.all과 WEB표준_기본지식

1. DOM

지금은 WEB 표준이 많이 대중화되어 있는데, 아래에서 다루고 있는 것은 그 표준에 맞지 않는 document.all[] 입니다. DOM - DOCUMENT OBJECT MODEL 문서 객체 모델은 문서 객체에 액세스하는 방법을 제공합니다. 예를 들어 문서에 테이블이 있고 배경색을 변경하려는 경우 document.all[]을 사용하여 자바스크립트에서 TABLE에 액세스할 수 있습니다. 그러나 DOM도 다릅니다. 브라우저 제조업체 간의 경쟁으로 인해 각 브라우저 제조업체는 자체 브라우저에서만 올바르게 실행될 수 있는 자체 비공개 DOM을 개발했습니다. document.all[]은 Microsoft의 비공개 DOM에서만 실행될 수 있습니다. DOM을 정확하게 이해하기 위해 IE4의 DOM을

줍니다. 2. document.all[]을 이해합니다.

IE4부터 IE의 객체 모델은 document만 추가했습니다. .all[ ], document.all[]의 설명을 살펴보겠습니다.
문서에 있는 모든 HTML 태그의 배열.객체에 포함된 모든 요소의 컬렉션

즉. , document.all[]은 문서 개체의 모든 요소를 ​​포함하여 의 모든 태그로 구성된 배열 변수입니다(예제 1 참조).

IE의 document.all 컬렉션은 문서의 모든 요소에 대한 액세스를 제공합니다.

document.all[] 이 배열은 문서의 모든 요소에 대한 액세스를 제공합니다.

예 1(문서에 어떤 개체가 있는지 이해할 수 있음)

<title>Document.All 예시</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <h1>제목 예시</h1> <hr> <p>이것은 <em>문단</em>입니다. 단지 <em>문단입니다.</em></p> <p>또 다른 <em>문단.</em></p> <p>이 마지막 <em>문단</em>에는 <em id="special">특별히 강조됩니다.</em></p> <hr>
[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]
　 예시 2 (특정 요소에 접근)

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> </title>색상을 변경하려면 DIV를 클릭하세요<style type="text/css"> <!-- #docid{ height:400px; width:400px; background-color:#999;} --> </style> <div id="docid" name="docname" onclick="bgcolor()"></div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]


위의 예를 통해 문서의 특정 요소에 액세스하는 방법을 이해할 수 있습니다. 예를 들어

를 사용할 수 있습니다. 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("div")는 문서에 있는 모든 DIV의 배열을 반환합니다. 하나의 DIV만 있으므로 document.all.tags("div")[0] 을 사용하여 액세스할 수 있습니다.
　　3、使用document.all[]

例3

<title>Document.All Example #2</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <!-- Works in Internet Explorer and compatible --> <h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1> <form name="testform" id="testform" action="#" method="get"> <input type="button" value="Align Left" onclick="document.all['heading1'].align='left';"> <input type="button" value="Align Center" onclick="document.all['heading1'].align='center';"> <input type="button" value="Align Right" onclick="document.all['heading1'].align='right';"> <input type="button" value="Bigger" onclick="document.all['heading1'].style.fontSize='xx-large';"> <input type="button" value="Smaller" onclick="document.all['heading1'].style.fontSize='xx-small';"> <input type="button" value="Red" onclick="document.all['heading1'].style.color='red';"> <input type="button" value="Blue" onclick="document.all['heading1'].style.color='blue';"> <input type="button" value="Black" onclick="document.all['heading1'].style.color='black';"> <input type="text" name="userText" id="userText" size="30"> <input type="button" value="Change Text" onclick="document.all['heading1'].innerText=document.testform.userText.value;"> </form>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　4、标准DOM中的访问方法

　　开头就说过document.all[]不符合WEB标准，那用什么来替代它呢？document.getElementById


Most third-party browsers are â€œstrict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.

　　这段话的意思是大多数第三方浏览器只支持W3C的DOM，如果你的网站用户使用其他的浏览器，那么你最好避免使用IE的私有属性。而且IE6也开始支持W3C　DOM。

　　毕竟大多数人还不了解标准，在使用标准前，你还可以在你的网页中用document.all[]访问文档对象前面写到WEB标准，今天继续WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签：

　　1、getElementById()

　　getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。

　　比如说有一个DIV的ID为docid：

　　那么就可以用getElementById("docid")来获得这个元素。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>ById</title> <style type="text/css"> <!-- #docid{ height:400px; width:400px; background-color:#999;} --> </style> <div id="docid" name="docname" onclick="bgcolor()"></div> <script language="javascript" type="text/javascript"> <!-- function bgcolor(){ document.getElementById("docid").style.backgroundColor="#000" } --> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　2、getElementsByName()

　　这个是通过NAME来获得元素，但不知大家注意没有，这个是GET　ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？

　　因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

　　比如有两个DIV：

　　那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV，用getElementsByName("docname")[1]访问第二个DIV。

　　下面这段话有错，请看forfor的回复，但是很可惜，IE没有支持这个方法，大家有兴趣可以在FIREFOX或NETSCAPE中调试下面这个例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中调试成功。）

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Byname,tag</title> <style type="text/css"> <!-- #docid1,#docid2{ margin:10px; height:400px; width:400px; background-color:#999;} --> </style> <div name="docname" id="docid1" onclick="bgcolor()"></div> <div name="docname" id="docid2" onclick="bgcolor()"></div> <script language="javascript" type="text/javascript"> <!-- function bgcolor(){ var docnObj=document.getElementsByName("docname"); docnObj[0].style.backgroundColor = "black"; docnObj[1].style.backgroundColor = "black"; } --> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　看来最新版浏览器理解WEB标准还是有问题，我知道的只有盒模型、空格BUG、漂浮BUG、FLASH插入BUG，从document.getElementsByName可以看出FIREFOX，NETSCAPE理解标准有偏差，但forfor说的对：要灵活应用标准。

　　3、getElementsByTagName()

　　这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。

　　下面这个例子有两个DIV，可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV，用

getElementsByTagName("div")[1]访问第二个DIV。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Byname,tag</title> <style type="text/css"> <!-- #docid1,#docid2{ margin:10px; height:400px; width:400px; background-color:#999;} --> </style> <div name="docname" id="docid1" onclick="bgcolor()"></div> <div name="docname" id="docid2" onclick="bgcolor()"></div> <script language="javascript" type="text/javascript"> <!-- function bgcolor(){ var docnObj=document.getElementsByTagName("div"); docnObj[0].style.backgroundColor = "black"; docnObj[1].style.backgroundColor = "black"; } --> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　总结一下标准DOM，访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但IE不支持getElementsByName()，所以就要避免使用getElementsByName()，但getElementsByName()和不符合标准的document.all[]也不是全无是处，它们有自己的方便之处，用不用那就看网站的用户使用什么浏览器，由你自己决定了。

　　关于document.getElementsByName

　　IE当然支持 å¯ä»¥è¯´IE更忠于html/xhtml标准(嘿嘿 åŽŸæ¥firefox也不咋地 å¹¸ç¾ä¹ç¥¸ä¸€ä¸‹^_^)

　　按照O'REILLY的<>中的说法 name并不是核心属性 å¹¶éžæ‰€æœ‰æ ‡ç­¾éƒ½å¯ä»¥åŠ name属性(大家可以拿我下面的例子去 validator.w3.org åšéªŒè¯)

　　所以你给div加name属性理论上是不会出结果的.这一点IE很好的符合了标准~!!

　　(同时也看出了符合标准也有烦人的地方~_~ æ‰€ä»¥å¤§å®¶ä¸ç”¨å¤ªæŠŠæ ‡å‡†å½“回事儿 è¿‡ä¸¤å¹´éƒ½ç”¨xml了 è¿™ä¸ªä¹Ÿè¿‡æ—¶äº†!倡导灵活的webstandard应用思想 é™¤äº†ç¬¦åˆxml思想的东西 å…¶ä»–的按浏览器的理解去做就行)

附: 

<script type="text/javascript"> <!-- function aa(){ var s="Elements with attribute 'name':\n"; var aaa=document.getElementsByName("a"); for(var i=0;i<aaa.length;i++)s+="\n"+aaa[i].tagName; alert(s); } --> </script> <title> test </title> <div name="a"> <span name="a">1</span>2<input name="a" value="3"><textarea name="a" rows="2" cols="8">4<button onclick="aa()">alert</button>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　简单来说就是DIV不支持NAME属性，所以那个document.getElementsByName的例子调试不能通过.
下面用INPUT做个例子

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Byname,tag</title> <style type="text/css"> <!-- #docid1,#docid2{ margin:10px; height:400px; width:400px; background-color:#999;} --> </style> <input name="docname" onmouseover="bgcolor()" onmouseout="bgcolor2()"> <input name="docname" onmouseover="bgcolor()" onmouseout="bgcolor2()"> <script language="javascript" type="text/javascript"> <!-- function bgcolor(){ var docnObj=document.getElementsByName("docname"); docnObj[0].style.backgroundColor = "black"; docnObj[1].style.backgroundColor = "black"; } function bgcolor2(){ var docnObj=document.getElementsByName("docname"); docnObj[0].style.backgroundColor = "#fff"; docnObj[1].style.backgroundColor = "#fff"; } --> </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]