web标准:细说document.all[]与WEB标准(2)来源: 发布时间:星期二, 2008年11月18日 浏览:66次 评论:0
细说document.all[]
前面写到WEB标准，今天继续 WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签： [color="#FF0000"]1、getElementById() getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。 比如说有一个DIV的ID为docid： <div id="docid"></div> 那么就可以用getElementById("docid")来获得这个元素。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c> <title>ById</title> <style type="text/css"> <!-- #docid{ height:400px; width:400px; background-color:#999;} --> </style> </head> <body><div id="docid" name="docname" ></div> </body> </html> <script language="JavaScript" type="text/JavaScript"> <!-- function bgcolor(){ document.getElementById("docid").style.backgroundColor="#000" } --> </script> [color="#FF0000"]2、getElementsByName() 这个是通过NAME来获得元素，但不知大家注意没有，这个是GET ELEMENTS，复数ELEMENTS代表获得的不是一个元素，为什么呢？ 因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。打个比喻就像人的身份证号是唯一的（理论上，虽然现实中有重复），但名字 重复的却很多。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。 比如有两个DIV： <div name="docname" id="docid1"></div> <div name="docname" id="docid2"></div> 那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV，用getElementsByName ("docname")[1]访问第二个DIV。 下面这段话有错，请看forfor的回复 但是很可惜，IE没有支持这个方法，大家有兴趣可以在FIREFOX或NETSCAPE中调试下面这个例子。（我在NETSCAPE7.2英文版和FIREFOX1.0中调 试成功。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c> <title>Byname,tag</title> <style type="text/css"> <!-- #docid1,#docid2{ margin:10px; height:400px; width:400px; background-color:#999;} --> </style> </head> <body> <div name="docname" id="docid1" ></div> <div name="docname" id="docid2" ></div> </body> </html> <script language="JavaScript" type="text/JavaScript"> <!-- function bgcolor(){ var docnObj=document.getElementsByName("docname"); docnObj[0].style.backgroundColor = "black"; docnObj[1].style.backgroundColor = "black"; } --> </script> 看来最新版浏览器理解WEB标准还是有问题，我知道的只有盒模型、空格BUG、漂浮BUG、FLASH插入BUG，从document.getElementsByName可以看出FIREFOX，NETSCAPE理解标准有偏差，但forfor说的对：要灵活应用标准。 [color="#FF0000"]3、getElementsByTagName() 这个呢就是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。 下面这个例子有两个DIV，可以用getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个DIV，用 getElementsByTagName("div")[1]访问第二个DIV。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c> <title>Byname,tag</title> <style type="text/css"> <!-- #docid1,#docid2{ margin:10px; height:400px; width:400px; background-color:#999;} --> </style> </head> <body> <div name="docname" id="docid1" ></div> <div name="docname" id="docid2" ></div> </body> </html> <script language="JavaScript" type="text/JavaScript"> <!-- function bgcolor(){ var docnObj=document.getElementsByTagName("div"); docnObj[0].style.backgroundColor = "black"; docnObj[1].style.backgroundColor = "black"; } --> </script> 总结一下标准DOM，访问某一特定元素尽量用标准的getElementById()，访问标签用标准的getElementByTagName(),但IE不支持 getElementsByName()，所以就要避免使用getElementsByName()，但getElementsByName()和不符合标准的document.all[]也不是全无是处，它 们有自己的方便之处，用不用那就看网站的用户使用什么浏览器，由你自己决定了。 细说document.all[]与WEB标准[请求置顶] 关于document.getElementsByName IE当然支持 可以说IE更忠于html/xhtml标准(嘿嘿 原来firefox也不咋地 幸灾乐祸一下^_^) 按照O'REILLY的<<HTML与XHTML权威指南>>中的说法 name并不是核心属性 并非所有标签都可以加name属性(大家可以拿我下面的例子去 http://validator.w3.org 做验证) 所以你给div加name属性理论上是不会出结果的.这一点IE很好的符合了标准~!! (同时也看出了符合标准也有烦人的地方~_~ 所以大家不用太把标准当回事儿 过两年都用xml了 这个也过时了!倡导灵活的webstandard应用思想 除了符合xml思想的东西 其他的按浏览器的理解去做就行) 附: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <script type="text/javascript"> <!-- function aa(){ var s="Elements with attribute 'name':\n"; var aaa=document.getElementsByName("a"); for(var i=0;i<aaa.length;i++)s+="\n"+aaa.tagName; alert(s); } --> </script> <title> test </title> </head> <body> <div name="a"><span name="a">1</span>2<input name="a" value="3"/><textarea name="a" rows="2" cols="8">4</textarea><button >alert</button></div> </body> </html> 简单来说就是DIV不支持NAME属性，所以那个document.getElementsByName的例子调试不能通过. 下面用INPUT做个例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="[ 0
相关文章
读者评论
发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
