`
bruce198
  • 浏览: 233284 次
  • 性别: 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支持此属性,因此也用来判断浏览器的种类*/   
分享到:
评论

相关推荐

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

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

    js document对象详解

    关于js的document对象的详细说明 转载的呵呵

    JavaScript的document和window对象详解

    JavaScript的document和window对象详解

    JavaScript的document对象和window对象详解

    JavaScript的document对象和window对象详解,js经常用得到的知识,了解下。

    JavaScript中document对象使用详解

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

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

    主要介绍了JS document对象简单用法,结合完整实例形式详细分析了JS document对象获取、输出、节点调用等相关操作技巧,需要的朋友可以参考下

    JavaScript——DOM操作——Window.document对象详解

    下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    超清晰的document对象详解

    document 文挡对象 – JavaScript脚本语言描述 ——————————————————————— 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写 否则会提示你一个错误信息 “引用的元素为空...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    JavaScript style对象与CurrentStyle对象案例详解  1、Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式,即元素标签中style属性的值。 例子: ...

    documen对象参考手册使用详解

    documen对象参考手册使用详解 document对象是很重要的对象来源javascript 要象学好aspdocument很重要

    JavaScript浏览器对象之一Window对象详解

    document对象 表示浏览器中加载页面的文档对象; location对象包含了浏览器当前的URL信息; navigation对象 包含了浏览器本身的信息; screen对象 包含了客户端屏幕及渲染能力的信息; history对象 包含了浏览器访问...

    js基础之DOM中document对象的常用属性方法详解

    1 document.anchors 返回对文档中所有 Anchor 对象的引用。还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 document.body ...

    【JavaScript源代码】JavaScript中BOM和DOM详解.docx

    JavaScript中BOM和DOM详解  目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关...

    JavaScript中document.referrer的用法详解

    在JavaScript中,document对象有很多属性,其中有3个与对网页的请求有关的属性,它们分别是URL、domain和referrer。 URL属性包含页面完整的URL,domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前...

    【JavaScript源代码】详解jQuery的拷贝对象.docx

    详解jQuery的拷贝对象  &lt;!DOCTYPE html&gt;  &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt; , initial-scale=1.0"&gt; &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt; &lt;title&gt;Document&lt;/title&gt;...

    javascript_高级编程

    第5 章 document 对象. 5.15 document 对象的属性 5.16 document 对象的方法 第6 章文本对象. 6.17 文本对象的属性 6.18 文本对象的方法 6.19 文本对象的事件 6.20 文本区域对象 第7 章按钮对象. 7.21 button、...

Global site tag (gtag.js) - Google Analytics