`
bruce198
  • 浏览: 236326 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Document对象详解 (JS)

    博客分类:
  • java
阅读更多
  1. Document对象详解 document 文挡对象 - JavaScript脚本语言描述   
  2. ---------------------------------------------------------------------   
  3. 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写   
  4.    否则会提示你一个错误信息 "引用的元素为空或者不是对象"   
  5. ---------------------------------------------------------------------   
  6. 对象属性   
  7. document.title             //设置文档标题等价于HTML的<title>标签   
  8. document.bgColor           //设置页面背景色   
  9. document.fgColor           //设置前景色(文本颜色)   
  10. Links                             //此文档中所有链接的集    
  11. document.linkColor         //未点击过的链接颜色   
  12. document.alinkColor        //激活链接(焦点在此链接上)的颜色   
  13. document.vlinkColor        //已点击过的链接颜色   
  14. document.URL               //设置URL属性从而在同一窗口打开另一网页   
  15. Location                        //此页的URL    
  16. Referrer                         //链接此页的网页的URL    
  17. document.fileCreatedDate   //文件建立日期,只读属性   
  18. document.fileModifiedDate  //文件修改日期,只读属性   
  19. document.fileSize          //文件大小,只读属性   
  20. document.cookie            //设置和读出cookie   
  21. document.charset           //设置字符集 简体中文:gb2312   
  22. ---------------------------------------------------------------------   
  23. 属性描述    
  24. ActiveElement    //当前具有焦点的元素    
  25. All                      //此文档中所有元素的集    
  26. Anchors            // 此文档中所有定位的集    
  27. Applets             //此文档中所有applet的集    
  28. Domain            // 获得此文件的Web服务器所在的域名    
  29. Forms              // 此文档中所有窗体的集    
  30. Frames            //此文档中所有框架的集    
  31. Images            // 此文档中所有图象的集    
  32. LastModified    // 此文件最后一次修改时的日期和时间    
  33. ReadyState      //此页的下载状态,等于”uninitialized”(页调入前)、”loading”(页调入中)、”interactive”(操作链接时)或”complete”(完成调入)   
  34. Scripts              //此文档中所有脚本的集    
  35. StyleSheets      此文档中所有style sheet的集    
  36. Title 此页的标题    
  37. URL 此页的URL    
  38. VlinkColor 点击过的链接的颜色    
  39. -------------------------------对象方法--------------------------------------   
  40. Close() 关闭HTML输出流    
  41. Open() 打开HTML输出流    
  42. Write(str) 往HTML输出流中写入str    
  43. Writeln(str) 往HTML输出流中写入str和一个新行    
  44. document.write()                  //动态向页面写入内容   
  45. document.createElement(Tag)       //创建一个html标签对象   
  46. document.getElementById(ID)       //获得指定ID值的对象   
  47. document.getElementsByName(Name)  //获得指定Name值的对象   
  48. ---------------------------------------------------------------------   
  49.   
  50. images集合(页面中的图象)   
  51.   
  52. a)通过集合引用   
  53. document.images             //对应页面上的<img>标签   
  54. document.images.length      //对应页面上<img>标签的个数   
  55. document.images[0]          //第1个<img>标签              
  56. document.images[i]          //第i-1个<img>标签   
  57.   
  58. b)通过name属性直接引用   
  59. <img name="oImage">  
  60. document.images.oImage      //document.images.name属性   
  61.   
  62. c)引用图片的src属性   
  63. document.images.oImage.src  //document.images.name属性.src   
  64.   
  65. d)创建一个图象   
  66. var oImage   
  67. oImage = new Image()   
  68. document.images.oImage.src="/1.jpg"  
  69. 同时在页面上建立一个<img>标签与之对应就可以显示   
  70.   
  71. <html>  
  72. <img name=oImage>  
  73. <script language="javascript">  
  74.    var oImage   
  75.    oImage = new Image()   
  76.    document.images.oImage.src="/1.jpg"  
  77. </script>  
  78. </html>  
  79.   
  80. ----------------------------------------------------------------------   
  81.   
  82. forms集合(页面中的表单)   
  83.   
  84. a)通过集合引用   
  85. document.forms                 //对应页面上的<form>标签   
  86. document.forms.length          //对应页面上<form>标签的个数   
  87. document.forms[0]              //第1个<form>标签   
  88. document.forms[i]              //第i-1个<form>标签   
  89. document.forms[i].length       //第i-1个<form>中的控件数   
  90. document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件   
  91.   
  92. b)通过标签name属性直接引用   
  93. <form name="Myform"><input name="myctrl"></form>  
  94. document.Myform.myctrl         //document.表单名.控件名   
  95.   
  96. -----------------------------------------------------------------------   
  97. <html>  
  98. <!--Text控件相关Script-->  
  99. <form name="Myform">  
  100. <input type="text" name="oText">  
  101. <input type="password" name="oPswd">  
  102. <form>  
  103. <script language="javascript">  
  104. //获取文本密码框的值   
  105. document.write(document.Myform.oText.value)   
  106. document.write(document.Myform.oPswd.value)   
  107. </script>  
  108. </html>  
  109. -----------------------------------------------------------------------   
  110. <html>  
  111. <!--Select控件相关Script-->  
  112. <form name="Myform">  
  113. <select name="oSelect">  
  114. <option value="1">1</option>  
  115. <option value="2">2</option>  
  116. <option value="3">3</option>  
  117. <option value="4">4</option>  
  118. <option value="7">sdf</option>  
  119. </select>  
  120. </form>  
  121.   
  122. <script language="javascript">  
  123.    //遍历select控件的option项   
  124.    var length   
  125.   document.write(document.Myform.oSelect.length+"<BR>")   
  126.    length=document.Myform.oSelect.length   
  127.    for(i=0;i<length;i++)   
  128.    document.write(document.Myform.oSelect[i].value+"<BR>")   
  129. </script>  
  130.   
  131. <script language="javascript">  
  132.    //遍历option项并且判断某个option是否被选中   
  133.    for(i=0;i<document.Myform.oSelect.length;i++){   
  134.    if(document.Myform.oSelect[i].selected!=true)   
  135.    document.write(document.Myform.oSelect[i].value+"<BR>")   
  136.    else   
  137.    document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>"+"<BR>")      
  138.    }   
  139. </script>  
  140.   
  141. <script language="javascript">  
  142.    //根据SelectedIndex打印出选中的option   
  143.    //(0到document.Myform.oSelect.length-1)   
  144.    i=document.Myform.oSelect.selectedIndex   
  145.    document.write(i+"<B>"+"<BR>")   
  146.    document.write(document.Myform.oSelect[i].value)   
  147. </script>  
  148.   
  149. <script language="javascript">  
  150.    //动态增加select控件的option项   
  151.    var oOption = document.createElement("OPTION");   
  152.    oOption.text="4";   
  153.    oOption.value="4";   
  154.    document.Myform.oSelect.add(oOption);   
  155. </script>  
  156. <html>  
  157. -----------------------------------------------------------------------   
  158. <Div id="oDiv">Text</Div>  
  159. document.all.oDiv                       //引用图层oDiv   
  160. document.all.oDiv.style                    
  161. document.all.oDiv.style.display=""      //图层设置为可视   
  162. document.all.oDiv.style.display="none"  //图层设置为隐藏   
  163. /*document.all表示document中所有对象的集合   
  164. 只有ie支持此属性,因此也用来判断浏览器的种类*/   
分享到:
评论

相关推荐

    js document对象详解

    JS 的 document 对象详解 作为 JavaScript 脚本语言中最重要的对象之一,document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title...

    javascript-document对象详解(下).zip

    在这个“javascript-document对象详解(下)”的压缩包中,我们可以通过三个文件来深入理解这个核心概念。 首先,`29.document-fun.html`可能是一个包含实际代码示例的HTML文件,它展示了`document`对象在实践中的...

    javasxript_document对象详解.txt

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在JavaScript中,`Document`对象是构成浏览器文档对象模型(DOM)的核心部分之一。它提供了对网页文档结构的访问和控制能力,允许开发者通过脚本...

    document 文挡对象详解

    在Web开发中,Document对象是JavaScript的核心组成部分,它代表了HTML或XML文档的结构和内容。这个对象允许我们与页面的DOM(文档对象模型)进行交互,包括创建、修改和检索文档元素。本文将深入探讨Document对象的...

    JavaScript的document和window对象详解

    ### JavaScript的document和window对象详解 #### Document对象 在JavaScript中,`document`对象是`window`和`frames`对象的一个属性,它表示显示在窗口或框架内的HTML文档。通过这个对象,开发者能够访问和操作...

    javascript document 对象的用法大全

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在Web开发中,`document`对象是浏览器提供的一种能够操作HTML文档的方式。它属于浏览器的`window`对象的一个属性,可以通过`window.document`或者...

    javascript的document对象

    ### JavaScript的Document对象详解 在Web开发中,`Document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并提供了与该文档交互的方法和属性。掌握`Document`对象的基本用法对于进行前端开发至关...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中,`document`对象是浏览器提供的核心对象之一,它代表了当前加载的HTML文档,并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象,...

    ActiveObject 对象 Msxml2.DOMDocument 详解

    由于安全原因,ActiveX对象通常受限于同源策略,这意味着JavaScript不能在不同域名之间直接使用Msxml2.DOMDocument对象。不过,在服务器端如ASP.NET中,这个问题不复存在,因此Msxml2.DOMDocument可以在服务器上自由...

    JavaScript的document对象和window对象详解

    在JavaScript编程中,document对象和window对象的使用无处不在。理解这两个对象及其属性、方法和事件处理程序是成为一名优秀前端开发人员的基础。通过深入掌握这两个对象的使用,我们可以有效地操作网页文档、响应...

    JavaScript中document对象使用详解

    对象属性 代码如下: document.title //设置文档标题等价于HTML的&lt;title&gt;标签 document.bgColor //设置页面背景色 document.fgColor //设置前景色(文本颜色) document.linkColor //未点击过的链接颜色 ...

    超清晰的document对象详解

    超清晰的document对象详解 document对象是JavaScript中最基本、最重要的对象之一,它提供了访问和操作HTML文档的各种方法和属性。在本文中,我们将详细介绍document对象的各种属性和方法,并通过实例代码来说明它们...

    第8章+Document对象.pdf

    ### 第8章 Document对象知识点详解 #### 一、Document对象概览 **Document对象**是浏览器解析HTML文档后创建的核心对象之一,它位于浏览器对象模型(BOM)与文档对象模型(DOM)的交汇点上。Document对象允许...

    JavaScript常用对象详解

    ### JavaScript常用对象详解 在深入探讨JavaScript的常用对象之前,我们先来理解一下JavaScript作为一种脚本语言,在网页开发中的核心作用。JavaScript使网页具备了动态交互能力,它可以通过操作页面对象和执行各种...

    JS中关于document.all的详解

    ### JS中关于`document.all`的详解 #### 一、`document.all`简介 `document.all` 是一个只读属性,它返回一个包含文档中所有元素的类数组对象。这个特性最初是为 Internet Explorer 设计的,并且在早期版本的 IE 中...

    windows和document方法详解.doc

    在JavaScript编程中,`window`和`document`对象是两个非常关键的概念,它们分别代表了浏览器的窗口和页面文档的内容。下面将详细解释这两个对象及其包含的方法和属性。 `document`对象是`window`和`frames`对象的一...

    JS document对象简单用法完整示例

    JavaScript中的`document`对象是浏览器提供的全局对象,用于访问和操作HTML文档的各个部分,包括元素、属性、事件等。本篇文章将详细讲解`document`对象的一些基础用法,包括直接和间接获取页面元素的方法。 1. **...

    JavaScript的浏览器对象详解

    ### JavaScript的浏览器对象详解 在深入探讨JavaScript的浏览器对象之前,我们先来了解这些对象为何对Web开发至关重要。JavaScript作为Web开发中不可或缺的一部分,通过其内置的浏览器对象模型(Browser Object ...

Global site tag (gtag.js) - Google Analytics