`
caozuiba
  • 浏览: 896447 次
文章分类
社区版块
存档分类
最新评论

document.all与WEB标准

 
阅读更多
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>


分享到:
评论

相关推荐

    web开发中常用的input事件汇总

    1.&lt;INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1&gt; 2.&lt;INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2&gt; 3....

    推荐免费好用的Web在线Office(Word)编辑控件

    document.all.FramerControl1.Open("C:\\Plain.txt",false, "Word.Document"); //打开服务器的文件 document.all.FramerControl1.Open "https://secureserver/test/mytest.asp?id=123",true, "Excel.Sheet", ...

    Positioning.in.CSS.Layout.Enhancements.for.the.Web.149193

    add sticky section headings to lists or long articles, or overlap one element with another, this concise ebook will expertly guide you through all the main CSS positioning types. Short and deep, ...

    WEB常见问题

    1.关闭当前浏览页面:onClientClick="window.close()" 2.网页中添加计时器:(考试系统) &lt;title&gt;&lt;/title&gt; ... document.all.agree.value= "等待时间为 ( "+showthis+ ")秒 "; } } &lt;/script&gt;

    Ajax-fileuploader.zip

    一个jquery、php和node.js插件,将标准输入转换为页面上革命性的、奇特的字段。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小...

    利用WebBrowser彻底解决Web打印问题(包括后台打印)

    页面设置和打印预览如下所示,直接调用即可document.all.WebBrowser.ExecWB(6,6) 直接打印document.all.WebBrowser.ExecWB(8,1) 页面设置document.all.WebBrowser.ExecWB(7,1) 打印预览或者:execScript("document....

    jsp页面如何实现web打印

    document.all.WebBrowser.ExecWB(6,6) 直接打印 document.all.WebBrowser.ExecWB(8,1) 页面设置 document.all.WebBrowser.ExecWB(7,1) 打印预览 3 隐藏不打印的页面元素和分页 CSS 有个Media 属性,可以分开...

    input按钮的事件处理大全

    INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1&gt; 2.&lt;INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=Button2&gt; 3.&lt;INPUT ...

    JavaScript权威指南

    Client-Side JavaScript: Executable Content in Web Pages Section 1.6. Client-Side JavaScript Features Section 1.7. JavaScript Security Section 1.8. Example: Computing Loan Payments with ...

    源码 javascript树形菜单.rar

    IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) { with (document) { write("&lt;STYLE TYPE='text/css'&gt;"); if (NS4) { write(".parent {position:absolute; visibility:visible}"); write("....

    图库新版jQuery焦点图 JS代码

    tips[25] = '个人行为与小规模配合压根不需要流程与规范,当交付结果需要大规模的应用时,同一的规格就显得非常重要了。'; tips[26] = '任何创作活动都是为了满足一定的需求,创新是执行过程中的副产品;为了创新而...

    美化你的代码 vb(VBS)代码格式化的实现代码

    先看下实现的效果: 格式化前: 代码如下: For i = 0 To WebBrowser1.Document.All.length – 1 If WebBrowser1.Document.All(i).tagName = “HTML” Then strContent = strContent & WebBrowser1.Document.All(i)...

    如何实现web页面的提示保存功能

    每每听到客户抱怨自己修改和很久的数据由于自己的一个误操作而丢失时,总想让web页面也有像window窗体一样具有提示保存的功能。所以,经过一段时间的研究以后终于实现了这个功能!...&gt;&lt;/asp:Button&gt;&lt;/form&gt; &lt;/body&gt;&lt;/...

    JavaScript获取当前页面上的指定对象示例代码

    方法如下: 代码如下: document.getElementById(ID) //获得指定ID值的对象 document.getElementsByName(Name) //获得指定Name值的对象数组 document.all[] //很智能的东东 不过非WEB标准 document....

    .NET中实现客户端联动菜单 (无刷新)

    protected System.Web.UI.WebControls.DropDownList DropDownList3; private void Page_Load(object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod)); if(!Page....

    MyEclipse使用教程

    MyEclipse Web 2.0 Workbench Overview Last Revision: January 27, 2006 Outline 1. Preface 2. Requirements 3. Introduction 4. Web 2.0 Workbench 1. Web 2.0 Perspective 2. Integrated Web 2.0 ...

    基于Web的2D图形引擎Matter.js.zip

    Matter.js 是一个基于 Web 的 2D 图形引擎。特性:物理属性(质量、面积、密度等)任何凸多边形的刚体稳定的叠加和 resting碰撞 (broad-phase, mid-phase and narrow-phase)Restitution (elastic and inelastic ...

    js使用小技巧

    对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...

    Developer’s Guide to Microsoft Unity

    other Internet Web site references, may change without notice. Some examples depicted herein are provided for illustration only and are fictitious. No real association or connection is intended or ...

Global site tag (gtag.js) - Google Analytics