document.all与WEB标准_Javascript教程-查字典教程网
document.all与WEB标准
document.all与WEB标准
发布时间:2016-12-30 来源:查字典编辑
摘要:1、DOMWEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENTOBJEC...

1、DOM

WEB标准现在可真是热门中热门,不过下面讨论的是一个不符合标准的document.all[]。DOM--DOCUMENTOBJECTMODEL文档对象模型,提供了访问文档对象的方法.例如文档中有一个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也开始支持W3CDOM。

毕竟大多数人还不了解标准,在使用标准前,你还可以在你的网页中用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来获得元素,但不知大家注意没有,这个是GETELEMENTS,复数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需刷新才能执行]

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类