前端设计

    主页 > 前端设计 > document对象详解

document对象详解

2010-08-03

 

  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. <Ｓelect 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. </Ｓelect>  
  120. </form>  
  121.   
  122. <script language="javascript">  
  123.    //遍历Ｓelect控件的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].Ｓelected!=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.ＳelectedIndex   
  145.    document.write(i+"<B>"+"<BR>")   
  146.    document.write(document.Myform.oSelect[i].value)   
  147. </script>  
  148.   
  149. <script language="javascript">  
  150.    //动态增加Ｓelect控件的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支持此属性，因此也用来判断浏览器的种类*/   

新闻资讯

最新资讯

最新案例

健身 健身
服务行业类型 服务行业类型
重工业机械设备网站 重工业机械设备网站
金融投资公司 金融投资公司

关于我们

新闻资讯

客户案例

产品展示

关注公众号

小程序