1、DOM
WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENT OBJECT MODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个table,你要改变它的背景颜色,那就可以在javascript中用document.all[]访问这个TABLE。但DOM也有所不同,因为浏览器厂商之间的竞争,各浏览器厂商都开发了自己的私有DOM,只能在自己的浏览器上正确运行,document.all[]就是只能运行在IE是的微软的私有DOM。为了正确理解DOM,给出IE4的DOM
2、理解document.all[]
从IE4开始IE的objectmodel才增加了document.all[],来看看document.all[]的Description:
ArrayofallHTMLtagsinthedocument.Collectionofallelementscontainedbytheobject.
也就是说document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素(见例1)。
IE'sdocument.allcollectionexposesalldocumentelements.Thisarrayprovidesaccesstoeveryelementinthedocument.
document.all[]这个数组可以访问文档中所有元素。
例1(这个可以让你理解文档中哪些是对象)
Document.All Example
Example Heading
This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
例2(访问一个特定元素) 单击DIV变色 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上面的这个例子让你了解怎么访问文档中的一个特定元素,比如文档中有一个DIV
<divid="docid"name="docname"></div>,你可以通过这个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
Document.All Example #2
DHTML Fun!!!
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
4、标准DOM中的访问方法 开头就说过document.all[]不符合WEB标准,那用什么来替代它呢?document.getElementById
Mostthird-partybrowsersare“strictstandards”implementations,meaningthattheyimplementW3CandECMAstandardsandignoremostoftheproprietaryobjectmodelsofInternetExplorerandNetscape.IfthedemographicforyourWebsiteincludesuserslikelytouselesscommonbrowsers,suchasLinuxaficionados,itmightbeagoodideatoavoidIE-specificfeaturesandusetheW3CDOMinstead.byInternetExplorer6,weseethatIEimplementssignificantportionsoftheW3CDOM.
这段话的意思是大多数第三方浏览器只支持W3C的DOM,如果你的网站用户使用其他的浏览器,那么你最好避免使用IE的私有属性。而且IE6也开始支持W3C DOM。
毕竟大多数人还不了解标准,在使用标准前,你还可以在你的网页中用document.all[]访问文档对象前面写到WEB标准,今天继续WEB标准下可以通过getElementById(),getElementsByName(),andgetElementsByTagName()访问DOCUMENT中的任一个标签:
1、getElementById()
getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
比如说有一个DIV的ID为docid:
<divid="docid"></div>
那么就可以用getElementById("docid")来获得这个元素。
ById [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2、getElementsByName()
这个是通过NAME来获得元素,但不知大家注意没有,这个是GET ELEMENTS,复数ELEMENTS代表获得的不是一个元素,为什么呢?
因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。
比如有两个DIV:
<divname="docname"id="docid1"></div>
<divname="docname"id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName("docname")[1]访问第二个DIV。
下面这段话有错,请看forfor的回复,但是很可惜,IE没有支持这个方法,大家有兴趣可以在FIREFOX或NETSCAPE中调试下面这个例子。(我在NETSCAPE7.2英文版和FIREFOX1.0中调试成功。)
Byname,tag [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。
Byname,tag [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行] 总结一下标准DOM,访问某一特定元素尽量用标准的getElementById(),访问标签用标准的getElementByTagName(),但IE不支持getElementsByName(),所以就要避免使用getElementsByName(),但getElementsByName()和不符合标准的document.all[]也不是全无是处,它们有自己的方便之处,用不用那就看网站的用户使用什么浏览器,由你自己决定了。
关于document.getElementsByName
IE当然支持可以说IE更忠于html/xhtml标准(嘿嘿原来firefox也不咋地幸灾乐祸一下^_^)
按照O'REILLY的<<HTML与XHTML权威指南>>中的说法name并不是核心属性并非所有标签都可以加name属性(大家可以拿我下面的例子去validator.w3.org做验证)
所以你给div加name属性理论上是不会出结果的.这一点IE很好的符合了标准~!!
(同时也看出了符合标准也有烦人的地方~_~所以大家不用太把标准当回事儿过两年都用xml了这个也过时了!倡导灵活的webstandard应用思想除了符合xml思想的东西其他的按浏览器的理解去做就行)
附:
test 124alert [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
简单来说就是DIV不支持NAME属性,所以那个document.getElementsByName的例子调试不能通过.
下面用INPUT做个例子
Byname,tag [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]