document.all与WEB标准

最新推荐文章于 2025-12-22 21:38:10 发布
最新推荐文章于 2025-12-22 21:38:10 发布 · 72 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文详细介绍了DOM操作中的document.all[]及标准DOM访问方法，包括getElementById(), getElementsByName(), 和getElementsByTagName()等，并通过实例展示了如何使用这些方法进行页面元素的操作。
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（这个可以让你理解文档中哪些是对象）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document.AllExample</title>
<metahttp-equiv="content-type"content="text/html;charset=ISO-8859-1"/>
</head>
<body>
<h1>ExampleHeading</h1>
<hr/>
<p>Thisisa<em>paragraph</em>.Itisonlya<em>paragraph.</em></p>
<p>Yetanother<em>paragraph.</em></p>
<p>Thisfinal<em>paragraph</em>has<emid="special">specialemphasis.</em></p>
<hr/>
<scripttype="text/javascript">
<!--
vari,origLength;
origLength=document.all.length;
document.write('document.all.length='+origLength+"<br/>");
for(i=0;i<origLength;i++)
{
document.write("document.all["+i+"]="+document.all[i].tagName+"<br/>");
}
//-->
</script>
</body>
</html>

　　例2（访问一个特定元素）

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>单击DIV变色</title>
<styletype="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><divid="docid"name="docname"onClick="bgcolor()"></div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionbgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</script>

　　上面的这个例子让你了解怎么访问文档中的一个特定元素，比如文档中有一个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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document.AllExample#2</title>
<metahttp-equiv="content-type"content="text/html;charset=ISO-8859-1"/>
</head>
<body>
<!--WorksinInternetExplorerandcompatible-->
<h1id="heading1"align="center"style="font-size:larger;">DHTMLFun!!!</h1>
<formname="testform"id="testform"action="#"method="get">
<br/><br/>
<inputtype="button"value="AlignLeft"
onclick="document.all['heading1'].align='left';"/>
<inputtype="button"value="AlignCenter"
onclick="document.all['heading1'].align='center';"/>
<inputtype="button"value="AlignRight"
onclick="document.all['heading1'].align='right';"/>
<br/><br/>
<inputtype="button"value="Bigger"
onclick="document.all['heading1'].style.fontSize='xx-large';"/>
<inputtype="button"value="Smaller"
onclick="document.all['heading1'].style.fontSize='xx-small';"/>
<br/><br/>
<inputtype="button"value="Red"
onclick="document.all['heading1'].style.color='red';"/>
<inputtype="button"value="Blue"
onclick="document.all['heading1'].style.color='blue';"/>
<inputtype="button"value="Black"
onclick="document.all['heading1'].style.color='black';"/>
<br/><br/>
<inputtype="text"name="userText"id="userText"size="30"/>
<inputtype="button"value="ChangeText"
onclick="document.all['heading1'].innerText=document.testform.userText.value;"/>
</form>
</body>
</html>

　　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")来获得这个元素。

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>ById</title>
<styletype="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><divid="docid"name="docname"onClick="bgcolor()"></div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionbgcolor(){
document.getElementById("docid").style.backgroundColor="#000"
}
-->
</script>

　　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中调试成功。）

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Byname,tag</title>
<styletype="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<divname="docname"id="docid1"onClick="bgcolor()"></div>
<divname="docname"id="docid2"onClick="bgcolor()"></div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionbgcolor(){
vardocnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor="black";
docnObj[1].style.backgroundColor="black";
}
-->
</script>

　　看来最新版浏览器理解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。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Byname,tag</title>
<styletype="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<divname="docname"id="docid1"onClick="bgcolor()"></div>
<divname="docname"id="docid2"onClick="bgcolor()"></div>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionbgcolor(){
vardocnObj=document.getElementsByTagName("div");
docnObj[0].style.backgroundColor="black";
docnObj[1].style.backgroundColor="black";
}
-->
</script>

　　总结一下标准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思想的东西其他的按浏览器的理解去做就行)

附:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<scripttype="text/javascript">
<!--
functionaa(){
vars="Elementswithattribute'name':/n";
varaaa=document.getElementsByName("a");
for(vari=0;i<aaa.length;i++)s+="/n"+aaa[i].tagName;
alert(s);
}
-->
</script>
<title>test</title>
</head>
<body>
<divname="a"><spanname="a">1</span>2<inputname="a"value="3"/><textareaname="a"rows="2"cols="8">4</textarea><buttononclick="aa()">alert</button></div>
</body>
</html>

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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>Byname,tag</title>
<styletype="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<inputname="docname"onmouseover="bgcolor()"onmouseout="bgcolor2()"/>
<inputname="docname"onmouseover="bgcolor()"onmouseout="bgcolor2()"/>
</body>
</html>
<scriptlanguage="javascript"type="text/javascript">
<!--
functionbgcolor(){
vardocnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor="black";
docnObj[1].style.backgroundColor="black";
}
functionbgcolor2(){
vardocnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor="#fff";
docnObj[1].style.backgroundColor="#fff";
}
-->
</script>


iteye_14265
关注
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
q798888291的博客
01-21 1547
JSP页面中，在&lt;html&gt;&lt;/html&gt;上面经常会有一句话： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; 一直不知道是什么意思，也没有过多关注过这句话。今天有个界面兼容性的BUG，改了这句话就好用了，因此稍微查找了一些资料，对其初有了解，总结如下： DOCTYPE...
document.all 的详解
Gorden的博客
08-30 2311
all 方法最初是由 IE 浏览器拥有的，并不属于 W3C 规范范畴，他返用 all 方法的 HTML 标记自身内的所有子孙元素的 HTML 标记集合。。通常情况下使用 document.all 方法获得文档元素内所有 HTML 标记的，他最先使用在 IE 浏览器中。现在其他浏览器已经支持 document.all 这个方法了，但在支持细节上有差异。
web逆向中奇葩的document.all
局外人LZ的博客
02-06 1339
document.all是IE 4.0及以上版本的专有属性，是一个表示当前文档的所有对象的数组，不仅包括页面上可见的实体对象，还包括一些不可见的对象，比如html注释等等。在document.all数组里面，元素不分层次，是按照其在文档中出现的先后顺序，平行地罗列的。所以可以用数字索引来引用到任何一个元素。
document.all的详细解释(document.all基本上所有浏览器可用！)
azhen5222的博客
11-28 4414
从何而来从IE4开始IE的object model才增加了document.all对象，MSDN中也对 Object.all 有详细的说明，Object.all是个HTMLCollection，不是数组，它包含document.all：http://msdn.microsoft.com/en-us/library/ms537434%28VS.85%29.aspx自他出现后，IE后续版本也...
window.onload 与 document.onload
HuntsBot的博客
10-27 2569
哪个得到更广泛的支持：window.onload 或 document.onload？
利用IE自带插件document.all.WebBrowser.ExecWB打印和分页
jike11231的博客
05-21 1299
classid固定写死 打印：document.all.WebBrowser.ExecWB(6,1) 直接打印：document.all.WebBrowser.ExecWB(6,6) 页面设置：document.all.WebBrowser.ExecWB(8,1) 打印预览：document.all.WebBrowser.ExecWB(7,1) 注意： style的media属性是print，也就是说这个style块中的样式是为打印设置的，Noprint类：在打印事不显示，CLASS属性设置为Noprint
document.all的用法
01-28 2100
document.all是IE的私有属性。容易出现兼容性问题。 在火狐和谷歌的浏览器是无效的，不符合WEB标准。 不建议使用，特别是document.all[Index]的使用，难于维护。 document.all是页面内所有元素的一个集合。例如： document.all(0)表示页面内第一个元素 document.all可以判断浏览器是否是IE if(document.al
weboffice控件接收html文件,WebOffice 文档控件API
weixin_42356139的博客
06-08 1196
目 录WebOffice是基于客户端的ocx控件，它的功能是将Office文档(Word、Excel、WPS)嵌入到浏览器中，并调用Office中各种接口，完成文档编辑工作，然后使用控件的Http接口模拟表单提交，发送到数据处理页面(此文档举例为saveDoc.asp页，代码见演示文件)，完成文档的存档工作。├ 装载控件 ... object >├ 触发初始化方法├...
js中document.getElementByid、document.all和document.layers区分介绍
10-28
随着Web技术的发展，`document.layers`和`document.all`已经逐渐被淘汰，取而代之的是基于DOM标准的方法，如`getElementById`，`querySelector`，`querySelectorAll`等。这些标准化的方法提供了更强大、更一致的跨...
Document和Document.all区别分析
09-06
总结来说，`Document` 和 `Document.all` 的主要区别在于，`Document` 是现代Web开发的标准接口，提供了更安全、更高效的方法来访问和操作文档元素，而 `Document.all` 是一个遗留的属性，主要用于兼容旧版本的...
document.all的一个比较完整的总结及案例
09-05
由于`document.all`是IE特有的，因此在现代Web开发中已经不再推荐使用，而是倾向于使用标准的DOM接口，如`getElementById`、`getElementsByClassName`和`querySelectorAll`等。 ### 1. `document.all`集合 `...
解决 firefox 不支持 document.all的方法
10-31
在 Web 开发中，我们经常会遇到浏览器的兼容性问题，其中一个常见的问题就是 Firefox 不支持 document.all 对象。document.all 是一个遗留的对象，早期的 IE 浏览器支持它，但是 Firefox 和其他浏览器并不支持它。 ...
《XHTML 简介》
lsx202406的博客
12-21 258
XHTML作为一种规范、严格、可扩展的标记语言，已成为现代网页开发的标准。掌握XHTML的基本概念、特点和应用场景，对于从事网页设计和开发的从业人员来说至关重要。在未来的发展中，XHTML将继续与HTML、CSS等技术相结合，推动Web应用的不断发展。作为一名Web开发者，我们应该紧跟技术发展趋势，不断提升自己的技能，为用户提供更好的网页体验。字数统计：约2200字本文以Markdown格式呈现，便于阅读和传播。如有需要，请根据实际情况进行修改和扩展。
pdf.js(pdfdist)踩坑workerSrc报错pdf.worker.mjs无法正确获取
weixin_39729729的博客
12-22 192
最近用pdf.js踩坑了几个点，其实本质都是workerSrc配置的问题，pdf.js引用了.mjs文件但又没做好处理，导致需要我们额外单独配置这一块。第一次遇到的时候我习惯性交给AI，AI按照搜索结果修改了workerSrc配置，解决了引用的为题，但是最终部署服务器还是不能用。后面还是人工花了些功夫把这个点搞明白，然后手动改了nginx配置才修复。AI还得加油啊！你以后可是我们的赛博牛马。
前端性能优化之Webpack篇
最新发布
程序员小寒的博客
12-22 527
虽然现在vite比较火，但很多公司中还是存在一些将webpack作为构建工具的前端老项目。最近在优化公司的一个webpack项目，所以整理了webpack常见的优化手段，一起来看看吧！
八股文-JavaScript（第一天）
qq_55961367的博客
12-22 1024
本文总结了前端开发中的多个核心知识点：1. 事件机制方面，列出了不会冒泡的事件类型，并比较了mouseEnter与mouseOver的区别；2. JavaScript特性包括MessageChannel通信、async/await原理、Proxy监听、解构赋值、变量提升和作用域链；3. React相关知识点涉及useState批量更新、Portals使用和React与React-DOM的关系；4. Vue部分包含响应式原理、生命周期钩子差异和请求发起时机；5. 模块系统对比了CommonJS与ES6的差异；
深入理解JavaScript中的document.all
"javascript里的document.all用法" 在JavaScript中，`document.all` 是一...随着IE浏览器市场份额的下降，`document.all`的使用越来越少，现代Web开发更多地依赖于标准化的DOM API和CSS Selectors来处理文档中的元素。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值