来讲讲:了解document.all[]:DOM文档工具模子
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"><!--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.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.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.alldocument.all.tags("div")则前往文档中一切DIV数组,本例中只要一个DIV,以是用document.all.tags("div")就能够会见了。
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"><inputtype="button"value="AlignLeft"onclick="document.all.align=left;"/><inputtype="button"value="AlignCenter"onclick="document.all.align=center;"/><inputtype="button"value="AlignRight"onclick="document.all.align=right;"/><inputtype="button"value="Bigger"onclick="document.all.style.fontSize=xx-large;"/><inputtype="button"value="Smaller"onclick="document.all.style.fontSize=xx-small;"/><inputtype="button"value="Red"onclick="document.all.style.color=red;"/><inputtype="button"value="Blue"onclick="document.all.style.color=blue;"/><inputtype="button"value="Black"onclick="document.all.style.color=black;"/><inputtype="text"name="userText"id="userText"size="30"/><inputtype="button"value="ChangeText"onclick="document.all.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")会见第一个DIV,用getElementsByName("docname")会见第二个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.style.backgroundColor="black";docnObj.style.backgroundColor="black";}--></script>
看来最新版扫瞄器了解WEB尺度仍是有成绩,我晓得的只要盒模子、空格BUG、漂泊BUG、FLASH拔出BUG,从document.getElementsByName能够看出FIREFOX,NETSCAPE了解尺度有偏向,但forfor说的对:要天真使用尺度。
3、getElementsByTagName()
这个呢就是经由过程TAGNAME(标署名称)来取得元素,一个DOCUMENT中固然会有不异的标签,以是这个办法也是获得一个数组。
上面这个例子有两个DIV,能够用getElementsByTagName("div")来会见它们,用getElementsByTagName("div")会见第一个DIV,用
getElementsByTagName("div")会见第二个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.style.backgroundColor="black";docnObj.style.backgroundColor="black";}--></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.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"onmou搜索引擎优化ver="bgcolor()"onmou搜索引擎优化ut="bgcolor2()"/><inputname="docname"onmou搜索引擎优化ver="bgcolor()"onmou搜索引擎优化ut="bgcolor2()"/></body></html><scriptlanguage="javascript"type="text/javascript"><!--functionbgcolor(){vardocnObj=document.getElementsByName("docname");docnObj.style.backgroundColor="black";docnObj.style.backgroundColor="black";}functionbgcolor2(){vardocnObj=document.getElementsByName("docname");docnObj.style.backgroundColor="#fff";docnObj.style.backgroundColor="#fff";}--></script></p>
可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。 技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]