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+"
");  
for (i = 0; i < origLength; i++)  
{  
document.write("document.all["+i+"]="+document.all[i].tagName+"
");  
}  
//-->  
</script>  
</body>  
</html> 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　例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>
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
 

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


  
<input type="button" value="Align Left"   
onclick="document.all['heading1'].align='left';" />  
<input type="button" value="Align Center"  
onclick="document.all['heading1'].align='center';" />  
<input type="button" value="Align Right"  
onclick="document.all['heading1'].align='right';" />  


  
<input type="button" value="Bigger"  
onclick="document.all['heading1'].style.fontSize='xx-large';" />  
<input type="button" value="Smaller"  
onclick="document.all['heading1'].style.fontSize='xx-small';" />  


  
<input type="button" value="Red"  
onclick="document.all['heading1'].style.color='red';" />  
<input type="button" value="Blue"  
onclick="document.all['heading1'].style.color='blue';" />  
<input type="button" value="Black"  
onclick="document.all['heading1'].style.color='black';" />  


  
<input type="text" name="userText" id="userText" size="30" />  
<input type="button" value="Change Text"  
onclick="document.all['heading1'].innerText=document.testform.userText.value;" />  
</form>  
</body>  
</html> 
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　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> 
  删除重复数据的算法
下一个：cloneNode实现表格增加删除效果
更多图片编程知识:
结合AJAX进行PHP开发之入门

帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js

myeclipse新建JSP中DOCTYPE问题

extjs fieldset和radio

.Net MVC3 中前台异步获取json数据的实例(1)

jsp自定义标签介绍
  
更多JS疑问解答：
几个验证11位手机号码格式的js代码
js把图片转换成 base64代码
js把base代码转换成图片
JS 将 base64编码的图片转化为图片文件
js中的定时器
js如何获得FCKeditor控件的值
用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
JS验证，这块“牛皮”反复修改都不能实现
在JS中使用DOM模型
如何用JS 获取本地文件夹的文件列表
js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
求实现自动生成图片缩略图的JS代码
JS脚本网页问题
js，代码中"object"和"Object"区别？
js+flash实现网页图片切换效果，出现边框，单击激活此控件。