document.all的使用 -

michealBean

浏览: 9170 次
性别:
来自: 武汉

最近访客更多访客>>

gzhu_101majia

独孤不求败

tianshangannan

jgo000

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

document.all的使用

javascript

 <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
  </head>
  <!-- 
  XML DOM nextSibling 属性 || javascript nextSibling
  reference: <[http://www.cnblogs.com/Dannier/archive/2012/04/19/2456839.html]>
  reference: <[http://www.w3school.com.cn/xmldom/prop_element_nextsibling.asp]>
  其中nodeType的值主要有以下几种：
  1.元素节点的nodeType值为1
  2.属性节点的nodeType值为2
  3.文本节点的nodeType值为3
  
  document.all  //ie only  usage: <[document.all.queryFrm.submit();]>
  访问页面dom元素:document.all[index/id/name]可通过索引号 id值 name(表单元素)访问到对应的某个DOM元素
  document.all.item(id/name) -> item()方法来获取集合中的元素
  document.all.tags("div") -> tags()方法返回某个标签的元素数组
  
  document.all的意思是文档的所有元素,也就是说它包含了当前网页的所有元素.它是以数组的形式保存元素的属性的,
  所以我们可以用 document.all["元素名"].属性名="属性值"来动态改变元素的属性.用这条语句,可以做出许许多多
  动态网页效果,如：动态变换图片、动态 改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文
  字的大小各颜色等等.你简直可以动态控制所有网页元素.document.all[]这个数组可以访问文档中所有元素
  
  怎么访问一个特定的元素,例如文档中有一个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]
  
document.all.length=19
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=BASE
document.all[5]=!
document.all[6]=BODY
document.all[7]=H1
document.all[8]=HR
document.all[9]=P
document.all[10]=EM
document.all[11]=EM
document.all[12]=P
document.all[13]=EM
document.all[14]=P
document.all[15]=EM
document.all[16]=EM
document.all[17]=HR
document.all[18]=SCRIPT  
  -->
  <body onload="bgcolor();">
     <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>
      
      <h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1>
      <form name="testform" id="testform" action="#" method="get">
          <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';" />
      </form>
   </body>
</html>
<script language="javascript" type="text/javascript">
function bgcolor()
{
    document.all[7].style.backgroundColor="#ffccff";
}
</script>

分享到：