来讲讲：了解document.all[]:DOM文档工具模子

只看该作者 · 发表于 2015-1-15 23:10:16

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
网页制造Webjx文章简介：浅谈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）。

IEsdocument.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"></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"></style></head><body><divid="docid"name="docname"onClick="bgcolor()"></div></body></html><scriptlanguage="javascript"type="text/javascript"></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><h1id="heading1"align="center"style="font-size:larger;">DHTMLFun!!!</h1><formname="testform"id="testform"action="#"method="get"><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;"/><inputtype="button"value="Bigger"onclick="document.all[heading1].style.fontSize=xx-large;"/><inputtype="button"value="Smaller"onclick="document.all[heading1].style.fontSize=xx-small;"/><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;"/><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"></style></head><body><divid="docid"name="docname"onClick="bgcolor()"></div></body></html><scriptlanguage="javascript"type="text/javascript"></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"></style></head><body><divname="docname"id="docid1"onClick="bgcolor()"></div><divname="docname"id="docid2"onClick="bgcolor()"></div></body></html><scriptlanguage="javascript"type="text/javascript"></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"></style></head><body><divname="docname"id="docid1"onClick="bgcolor()"></div><divname="docname"id="docid2"onClick="bgcolor()"></div></body></html><scriptlanguage="javascript"type="text/javascript"></script>

复制代码

　总结一下尺度DOM，会见某一特定元素只管用尺度的getElementById()，会见标签用尺度的getElementByTagName(),但IE不撑持getElementsByName()，以是就要制止利用getElementsByName()，但getElementsByName()和不切合尺度的document.all[]也不是全无是处，它们有本人的便利的地方，用不必那就看网站的用户利用甚么扫瞄器，由你本人决意了。

关于document.getElementsByName

IE固然撑持能够说IE更忠于html/xhtml尺度(嘿嘿本来firefox也不咋地同病相怜一下^_^)

依照OREILLY的<<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="Elementswithattributename:
";varaaa=document.getElementsByName("a");for(vari=0;i<aaa.length;i++)s+="
"+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"></style></head><body><inputname="docname"onmou搜索引擎优化ver="bgcolor()"onmou搜索引擎优化ut="bgcolor2()"/><inputname="docname"onmou搜索引擎优化ver="bgcolor()"onmou搜索引擎优化ut="bgcolor2()"/></body></html><scriptlanguage="javascript"type="text/javascript"></script>

复制代码

</p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

只看该作者 · 发表于 2015-1-17 20:09:21

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-1-26 22:44:31

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-5 05:54:02

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

只看该作者 · 发表于 2015-2-11 07:30:32

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

只看该作者 · 发表于 2015-3-2 00:48:51

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-3-11 03:53:52

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-25 08:00:29

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来讲讲：了解document.all[]:DOM文档工具模子

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子