当前位置: 首页 > 编程日记 > 正文

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的object model才增加了document.all[],来看看document.all[]的Description:
Array of all HTML tags in the document.Collection of all elements contained by the object.

也就是说document.all[]是文档中所有标签组成的一个数组变量,包括了文档对象中所有元素(见例1)。

  IE’s document.all collection exposes all document elements.This array provides access to every element in the document.

document.all[]这个数组可以访问文档中所有元素。

  例1(这个可以让你理解文档中哪些是对象)

<!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>
<title>Document.All Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
<script type="text/javascript">
<!--
var i,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(访问一个特定元素)

<!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" content="text/html; charset=gb2312">
<title>单击DIV变色</title>
<style type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</script>

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

<!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>
<title>Document.All Example #2</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<!-- Works in Internet Explorer and compatible -->
<h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>
<form name="testform" id="testform" action="#" method="get">
<br /><br />
<input type="button" value="Align Left" 
οnclick="document.all['heading1'].align='left';" />
<input type="button" value="Align Center"
οnclick="document.all['heading1'].align='center';" />
<input type="button" value="Align Right"
οnclick="document.all['heading1'].align='right';" />
<br /><br />
<input type="button" value="Bigger"
οnclick="document.all['heading1'].style.fontSize='xx-large';" />
<input type="button" value="Smaller"
οnclick="document.all['heading1'].style.fontSize='xx-small';" />
<br /><br />
<input type="button" value="Red"
οnclick="document.all['heading1'].style.color='red';" />
<input type="button" value="Blue"
οnclick="document.all['heading1'].style.color='blue';" />
<input type="button" value="Black"
οnclick="document.all['heading1'].style.color='black';" />
<br /><br />
<input type="text" name="userText" id="userText" size="30" />
<input type="button" value="Change Text"
οnclick="document.all['heading1'].innerText=document.testform.userText.value;" />
</form>
</body>
</html>

4、标准DOM中的访问方法

开头就说过document.all[]不符合WEB标准,那用什么来替代它呢?document.getElementById


Most third-party browsers are “strict standards” implementations, meaning that they implement W3C and ECMA standards and ignore most of the proprietary object models of Internet Explorer and Netscape.If the demographic for your Web site includes users likely to use less common browsers, such as Linux aficionados, it might be a good idea to avoid IE-specific features and use the W3C DOM instead. by Internet Explorer 6, we see that IE implements significant portions of the W3C DOM.

这段话的意思是大多数第三方浏览器只支持W3C的DOM,如果你的网站用户使用其他的浏览器,那么你最好避免使用IE的私有属性。而且IE6也开始支持W3C DOM。

  毕竟大多数人还不了解标准,在使用标准前,你还可以在你的网页中用document.all[]访问文档对象前面写到WEB标准,今天继续WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:

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" content="text/html; charset=gb2312">
<title>ById</title>
<style type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function bgcolor(){
document.getElementById("docid").style.backgroundColor="#000"
}
-->
</script>

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" content="text/html; charset=gb2312">
<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" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></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说的对:要灵活应用标准。

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" content="text/html; charset=gb2312">
<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" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></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.getElementsByName

IE当然支持 可以说IE更忠于html/xhtml标准(嘿嘿 原来firefox也不咋地 幸灾乐祸一下^_^)

按照O'REILLY的<<HTML与XHTML权威指南>>中的说法 name并不是核心属性 并非所有标签都可以加name属性(大家可以拿我下面的例子去 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[i].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 οnclick="aa()">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="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
#docid1,#docid2{
margin:10px;
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body>
<input name="docname" οnmοuseοver="bgcolor()" οnmοuseοut="bgcolor2()" />
<input name="docname" οnmοuseοver="bgcolor()" οnmοuseοut="bgcolor2()" />
</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";
}
function bgcolor2(){
var docnObj=document.getElementsByName("docname");
docnObj[0].style.backgroundColor = "#fff";
docnObj[1].style.backgroundColor = "#fff";
}
-->
</script>

相关文章:

终于有人把Python讲清楚了!

经常有人问我&#xff0c;Python初学者该怎么学好Python&#xff1f;其实从事Python开发的这些年中&#xff0c;我见过很多相关的教程和书籍&#xff0c;他们大都这样讲 &#xff1a;先介绍 Python 的基本语法规则、list、dict、tuple 等数据结构&#xff0c;然后再介绍字符串处…

开源 免费 java CMS - FreeCMS1.5-建站向导

2019独角兽企业重金招聘Python工程师标准>>> 下载地址&#xff1a;http://code.google.com/p/freecms/ 建站向导 从FreeCMS 1.5开始支持 为了方便用户创建站点&#xff0c;系统提供了建站向导功能。 从左侧管理菜单点击建站向导进入。 第一步&#xff1a;创建…

Python实战之网络编程socket学习笔记及简单练习

sk socket.socket(socket.AF_INET,socket.SOCK_STREAM,0) 参数一&#xff1a;地址簇 socket.AF_INET IPv4&#xff08;默认&#xff09; socket.AF_INET6 IPv6 socket.AF_UNIX 只能够用于单一的Unix系统进程间通信 参数二&#xff1a;类型 socket.SOCK_STREAM 流式socke…

用IE重起计算机或者关机

<script language"JavaScript"> var Applicationnew ActiveXObject(Shell.Application.1); </script> <button οnclickApplication.ShutdownWindows();>关机</button><br> <button οnclickApplication.Suspend();>挂起</bu…

系统故障分析和排查

日志的功能 用于记录系统、程序运行中发生的各种事件通过阅读日志&#xff0c;有助于诊断和解决系统故障日志文件的分类内核及系统日志由系统服务syslog统一进行管理&#xff0c;日志格式基本相似用户日志记录系统用户登录及退出系统的相关信息程序日志由各种应用程序独立管理的…

用数据分析《你好,李焕英》“斐妈”爆红的真相

作者 | 俊欣来源 | 数据分析与篮球头图 | 下载于视觉中国《你好&#xff0c;李焕英》成为了春节档最热门最火爆的电影之一。截止目前&#xff0c;根据猫眼电影专业版的数据显示&#xff0c;该影片的票房已经突破了43亿&#xff1b;在抖音搜索上&#xff0c;因为其“好哭”而冲上…

[转] Android开发之如何保证Service不被杀掉(broadcast+system/app)

转发&#xff1a;原文链接http://blog.csdn.net/mad1989/article/details/22492519 序言 最近项目要实现这样一个效果&#xff1a;运行后&#xff0c;要有一个service始终保持在后台运行&#xff0c;不管用户作出什么操作&#xff0c;都要保证service不被kill&#xff0c;这可真…

如何使得按确定和取消按纽转到两个不同的页面!

问&#xff1a; 如何使得按确定和取消按纽转到两个不同的页面&#xff01; confirm(),后面的具体参数是什么&#xff1f; ______________________________________________________________________________________________ 答1&#xff1a; 看个例子吧&#xff01; <scrip…

PHP函数学习nl2br(),strlen(),mb_strlen()

2019独角兽企业重金招聘Python工程师标准>>> 1 nl2br($str): 注意&#xff1a;n之后的是字母L的小写&#xff0c;不要当做数字1. 函数作用&#xff1a;在$str中的每个新行(\n)之前插入HTML换行符( <br/> ) 示例&#xff1a; echo nl2br("One line.\nAnot…

携手中国电信、中国联通,华为正式发布首个5G超级刀片站 A+P 2.0天线商用网络

近日&#xff0c;在2021 MWC 上海期间&#xff0c;中国电信、中国联通携手华为发布首个5G超级刀片站 AP 2.0天线商用网络。 中国电信5G共建共享工作组高级项目经理李志军分享中国电信部署AP 2.0后的商用体验。AP 2.0颜值与实力兼备&#xff0c;解决了无空间部署5G以及5G挂高低…

『干货』分享你最喜欢的技巧和提示(Xcode,objective-c,swift,c...等等)

亲爱的读者们,你们好 !年底将近,分享从过去一年你最喜欢的技巧和建议作为礼物送给新手们。提交你的最喜欢的迅速或objc琐事,实用的提示,意外的发现,实用的解决方法,没用的迷恋,或不论什么其它你认为今年非常酷。就在以下写下你的评论! 笔者分享总结例如以下(本篇会不定期进行更…

一口一个,超灵活的Python迷你项目

来源 | 法纳斯特责编 | 寇雪芹头图 | 下载于视觉中国在使用Python的过程中&#xff0c;我最喜欢的就是Python的各种第三方库&#xff0c;能够完成很多操作。下面就给大家介绍22个通过Python构建的项目&#xff0c;以此来学习Python编程。大家也可根据项目的目的及提示&#xff…

说说大型高并发高负载网站的系统架构【转】

我在CERNET做过拨号接入平台的搭建&#xff0c;而后在Yahoo&3721从事过搜索引擎前端开发&#xff0c;又在MOP处理过大型社区猫扑大杂烩的架构升级等工作&#xff0c;同时自己接触和开发过不少大中型网站的模块&#xff0c;因此在大型网站应对高负载和并发的解决方案上有一些…

DataGrid 的 全选/取消全选 控制(CheckBox)

DataGrid控件: <Columns> <asp:TemplateColumn> <HeaderStyle Width"10px"></HeaderStyle> <HeaderTemplate> <INPUT id"CheckAll" name"CheckAll" type"checkbox"…

k8s入门系列之介绍篇

Kubernetes介绍1.背景介绍  云计算飞速发展    - IaaS    - PaaS    - SaaS  Docker技术突飞猛进    - 一次构建&#xff0c;到处运行    - 容器的快速轻量    - 完整的生态环境2.什么是kubernetes  Kubernetes(k8s)是Google开源的容器集群管理系…

元宵节就要到了,花灯要不要来一盏?3D的那种

又是一年元宵佳节&#xff01;我国各地庆祝元宵节的方式很有讲究&#xff0c;有的地方吃汤圆&#xff0c;一个个软糯香圆&#xff1b;有的地方办灯展&#xff0c;十分热闹。当然&#xff0c;疫情当下&#xff0c;为了大家的安全&#xff0c;不建议线下聚众集会。但是&#xff0…

Android Timer的使用

1&#xff1a;服务端使用PHP <?phpecho date(Y-m-d H:i:s); ?> 2&#xff1a;activity_main.xml <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_w…

屏蔽相应键盘按钮

<script language"Javascript"><!-- //屏蔽鼠标右键、CtrlN、ShiftF10、F11、F5刷新、退格键 //Author: meizz(梅花雨) 2002-6-18 function document.oncontextmenu(){event.returnValuefalse;}//屏蔽鼠标右键function window.onhelp(){return false} //…

MySQL查询缓存

2019独角兽企业重金招聘Python工程师标准>>> MySQL 查询缓存保存查询返回的完整结果。当查询命中改缓存&#xff0c;MySQL 会立刻返回结果&#xff0c;跳过了解析、优化和执行阶段。 查询缓存系统会跟踪查询涉及查询中的每个表&#xff0c;如果这些表发生变化&#…

事半功倍系列 javascript

清华大学出版的《事半功倍系列 javascript》,本人照着书敲出来的,有些翻译了一下.前几年看了一下,最近无事,重新翻了翻,很有帮助.本书应该有光盘的,但学校的书,光盘不知在哪.希望对你学 javascript有帮助 第一章javascript简介 1.在地址栏输入javascript语句 Javascript:Doc…

Golang 本地帮助文档

2019独角兽企业重金招聘Python工程师标准>>> godoc -http:8000 url: http://127.0.0.1:8000 转载于:https://my.oschina.net/koalaone/blog/169626

2021版Java知识体系详解!(赠视频)

本篇文章是我们整理的一份架构师的成长路线&#xff0c;包括了并发编程、设计模式、常用框架、中间件、微服务与分布式、常用工具、JVM、MySQL、数据结构与算法&#xff0c;还有架构师精选视频、架构师成长路线高清大图。又是新的一年&#xff0c;每一年都会有人在成为架构师的…

【6】font-size 字体属性

font-style -- 字体风格font-variant -- 小型大写字母文本font-weight -- 文本的粗细font-size/line-height -- 大小/行高font-family -- 字体常用格式&#xff1a; fo…

MIS开发中.net Framework的打印功能

Microsoft .net Framework的打印功能都以组件的方式提供&#xff0c;为程序员提供了很大的方便&#xff0c;但是这几个组件的使用还是很复杂的&#xff0c;有必要解释一下。 打印操作通常包括以下四个功能 1 打印设置 设置打印机的一些参数比如更改打印机驱动程序等 2 页面设置…

UML部署图(转载)

概述: 部署图用于可视化的软件组件部署的系统中的物理组件的拓扑结构。 因此&#xff0c;部署图是用来描述一个系统的静态部署视图。部署图由节点和它们之间的关系。 目的: 部署名称本身描述的原理图的目的。部署图用于描述软件组件部署的硬件组件。组件图和部署图是密切相关的…

一年新增457万例,用 Python 揭示癌症的可怕之处

来源 | 数据分析与篮球作者 | 俊欣头图 | 下载于视觉中国2月27日下午5时许&#xff0c;香港著名演员吴孟达去世&#xff0c;引发了众多影星以及网友在社交媒体上面的悼念&#xff0c;根据其好友田启文的透露&#xff0c;吴孟达是去年年底发现自己患上肝癌的&#xff0c;当时癌细…

深度学习与计算机视觉系列(9)_串一串神经网络之动手实现小例子

深度学习与计算机视觉系列(9)_串一串神经网络之动手实现小例子 作者&#xff1a;寒小阳 时间&#xff1a;2016年1月。 出处&#xff1a;http://blog.csdn.net/han_xiaoyang/article/details/50521072 声明&#xff1a;版权所有&#xff0c;转载请联系作者并注明出处 1.引言 前面…

虚拟主机上用Asp.net实现Urlrewrite

在网上看到&#xff0c;很多朋友在asp.net中做urlrewrite&#xff0c;用的是HttpHandle&#xff0b;Server.Transfer的方法。其实这种方法是错误的。第一&#xff0c;HttpHandle是实现不了urlrewrite的&#xff1b;第二Server.Transfer是标准的重定向&#xff0c;根本不是urlre…

String spilt时转义特殊字符【转】

在使用String.split方法分隔字符串时&#xff0c;分隔符如果用到一些特殊字符&#xff0c;可能会得不到我们预期的结果。 我们经常使用public String[] split(String regex)方法来拆分一个有分隔符的字符串&#xff0c;但是由于参数regex是一个 regular-expression的匹配模式而…

融合AI与大数据技术,腾讯教育发布智能作业灯

3月2日&#xff0c;腾讯教育新品发布会在深圳举行&#xff0c;发布会上&#xff0c;腾讯教育联合暗物智能正式对外发布了AILA智能作业灯&#xff0c;并与华东师范大学出版社、宏途教育、众诚智学教育、江西软云科技等教育行业合作伙伴签订战略合作协议&#xff0c;共同打造智慧…