视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > JavaScript >

[JS]Js中的Document对象操作方面的详细介绍（很全面）

时间:2015-03-04 08:58酷播
[JS]Js中的Document对象操作方面的详细介绍（很全面）

[JS]Js中的Document对象操作方面的详细介绍（很全面）

  1. Document对象详解 document 文挡对象 - JavaScript脚本语言描述       
  2.    
  3. ---------------------------------------------------------------------       
  4.    
  5. 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写       
  6.    
  7.    否则会提示你一个错误信息 "引用的元素为空或者不是对象"       
  8.    
  9. ---------------------------------------------------------------------       
  10.    
  11. 对象属性       
  12.    
  13. document.title             //设置文档标题等价于HTML的<title>标签       
  14.    
  15. document.bgColor           //设置页面背景色       
  16.    
  17. document.fgColor           //设置前景色(文本颜色)       
  18.    
  19. Links                             //此文档中所有链接的集        
  20.    
  21. document.linkColor         //未点击过的链接颜色       
  22.    
  23. document.alinkColor        //激活链接(焦点在此链接上)的颜色       
  24.    
  25. document.vlinkColor        //已点击过的链接颜色       
  26.    
  27. document.URL               //设置URL属性从而在同一窗口打开另一网页       
  28.    
  29. Location                        //此页的URL        
  30.    
  31. Referrer                         //链接此页的网页的URL        
  32.    
  33. document.fileCreatedDate   //文件建立日期，只读属性       
  34.    
  35. document.fileModifiedDate  //文件修改日期，只读属性       
  36.    
  37. document.fileSize          //文件大小，只读属性       
  38.    
  39. document.cookie            //设置和读出cookie       
  40.    
  41. document.charset           //设置字符集 简体中文:gb2312       
  42.    
  43. ---------------------------------------------------------------------       
  44.    
  45. 属性描述        
  46.    
  47. ActiveElement    //当前具有焦点的元素        
  48.    
  49. All                      //此文档中所有元素的集        
  50.    
  51. Anchors            // 此文档中所有定位的集        
  52.    
  53. Applets             //此文档中所有applet的集        
  54.    
  55. Domain            // 获得此文件的Web服务器所在的域名        
  56.    
  57. Forms              // 此文档中所有窗体的集        
  58.    
  59. Frames            //此文档中所有框架的集        
  60.    
  61. Images            // 此文档中所有图象的集        
  62.    
  63. LastModified    // 此文件最后一次修改时的日期和时间        
  64.    
  65. ReadyState      //此页的下载状态，等于”uninitialized”（页调入前）、”loading”（页调入中）、”interactive”（操作链接时）或”complete”（完成调入）       
  66.    
  67. Scripts              //此文档中所有脚本的集        
  68.    
  69. StyleSheets      此文档中所有style sheet的集        
  70.    
  71. Title 此页的标题        
  72.    
  73. URL 此页的URL        
  74.    
  75. VlinkColor 点击过的链接的颜色        
  76.    
  77. -------------------------------对象方法--------------------------------------       
  78.    
  79. Close() 关闭HTML输出流        
  80.    
  81. Open() 打开HTML输出流        
  82.    
  83. Write(str) 往HTML输出流中写入str        
  84.    
  85. Writeln(str) 往HTML输出流中写入str和一个新行        
  86.    
  87. document.write()                  //动态向页面写入内容       
  88.    
  89. document.createElement(Tag)       //创建一个html标签对象       
  90.    
  91. document.getElementById(ID)       //获得指定ID值的对象       
  92.    
  93. document.getElementsByName(Name)  //获得指定Name值的对象       
  94.    
  95. ---------------------------------------------------------------------       
  96.    
  97.       
  98.    
  99. images集合(页面中的图象)       
  100.    
  101.       
  102.    
  103. a)通过集合引用       
  104.    
  105. document.images             //对应页面上的<img>标签       
  106.    
  107. document.images.length      //对应页面上<img>标签的个数       
  108.    
  109. document.images[0]          //第1个<img>标签                  
  110.    
  111. document.images[i]          //第i-1个<img>标签       
  112.    
  113.       
  114.    
  115. b)通过name属性直接引用       
  116.    
  117. <img name="oImage">      
  118.    
  119. document.images.oImage      //document.images.name属性       
  120.    
  121.       
  122.    
  123. c)引用图片的src属性       
  124.    
  125. document.images.oImage.src  //document.images.name属性.src       
  126.    
  127.       
  128.    
  129. d)创建一个图象       
  130.    
  131. var oImage       
  132.    
  133. oImage = new Image()       
  134.    
  135. document.images.oImage.src="/1.jpg"      
  136.    
  137. 同时在页面上建立一个<img>标签与之对应就可以显示       
  138.    
  139.       
  140.    
  141. <html>      
  142.    
  143. <img name=oImage>      
  144.    
  145. <script language="javascript">      
  146.    
  147.    var oImage       
  148.    
  149.    oImage = new Image()       
  150.    
  151.    document.images.oImage.src="/1.jpg"      
  152.    
  153. </script>      
  154.    
  155. </html>      
  156.    
  157.       
  158.    
  159. ----------------------------------------------------------------------       
  160.    
  161.       
  162.    
  163. forms集合(页面中的表单)       
  164.    
  165.       
  166.    
  167. a)通过集合引用       
  168.    
  169. document.forms                 //对应页面上的<form>标签       
  170.    
  171. document.forms.length          //对应页面上<form>标签的个数       
  172.    
  173. document.forms[0]              //第1个<form>标签       
  174.    
  175. document.forms[i]              //第i-1个<form>标签       
  176.    
  177. document.forms[i].length       //第i-1个<form>中的控件数       
  178.    
  179. document.forms[i].elements[j]  //第i-1个<form>中第j-1个控件       
  180.    
  181.       
  182.    
  183. b)通过标签name属性直接引用       
  184.    
  185. <form name="Myform"><input name="myctrl"></form>      
  186.    
  187. document.Myform.myctrl         //document.表单名.控件名       
  188.    
  189.       
  190.    
  191. -----------------------------------------------------------------------       
  192.    
  193. <html>      
  194.    
  195. <!--Text控件相关Script-->      
  196.    
  197. <form name="Myform">      
  198.    
  199. <input type="text" name="oText">      
  200.    
  201. <input type="password" name="oPswd">      
  202.    
  203. <form>      
  204.    
  205. <script language="javascript">      
  206.    
  207. //获取文本密码框的值       
  208.    
  209. document.write(document.Myform.oText.value)       
  210.    
  211. document.write(document.Myform.oPswd.value)       
  212.    
  213. </script>      
  214.    
  215. </html>      
  216.    
  217. -----------------------------------------------------------------------       
  218.    
  219. <html>      
  220.    
  221. <!--Select控件相关Script-->      
  222.    
  223. <form name="Myform">      
  224.    
  225. <select name="oSelect">      
  226.    
  227. <option value="1">1</option>      
  228.    
  229. <option value="2">2</option>      
  230.    
  231. <option value="3">3</option>      
  232.    
  233. <option value="4">4</option>      
  234.    
  235. <option value="7">sdf</option>      
  236.    
  237. </select>      
  238.    
  239. </form>      
  240.    
  241.       
  242.    
  243. <script language="javascript">      
  244.    
  245.    //遍历select控件的option项       
  246.    
  247.    var length       
  248.    
  249.   document.write(document.Myform.oSelect.length+"<BR>")       
  250.    
  251.    length=document.Myform.oSelect.length       
  252.    
  253.    for(i=0;i<length;i++)       
  254.    
  255.    document.write(document.Myform.oSelect[i].value+"<BR>")       
  256.    
  257. </script>      
  258.    
  259.       
  260.    
  261. <script language="javascript">      
  262.    
  263.    //遍历option项并且判断某个option是否被选中       
  264.    
  265.    for(i=0;i<document.Myform.oSelect.length;i++){       
  266.    
  267.    if(document.Myform.oSelect[i].selected!=true)       
  268.    
  269.    document.write(document.Myform.oSelect[i].value+"<BR>")       
  270.    
  271.    else       
  272.    
  273.    document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>"+"<BR>")          
  274.    
  275.    }       
  276.    
  277. </script>      
  278.    
  279.       
  280.    
  281. <script language="javascript">      
  282.    
  283.    //根据SelectedIndex打印出选中的option       
  284.    
  285.    //(0到document.Myform.oSelect.length-1)       
  286.    
  287.    i=document.Myform.oSelect.selectedIndex       
  288.    
  289.    document.write(i+"<B>"+"<BR>")       
  290.    
  291.    document.write(document.Myform.oSelect[i].value)       
  292.    
  293. </script>      
  294.    
  295.       
  296.    
  297. <script language="javascript">      
  298.    
  299.    //动态增加select控件的option项       
  300.    
  301.    var oOption = document.createElement("OPTION");       
  302.    
  303.    oOption.text="4";       
  304.    
  305.    oOption.value="4";       
  306.    
  307.    document.Myform.oSelect.add(oOption);       
  308.    
  309. </script>      
  310.    
  311. <html>      
  312.    
  313.    
  314. <Div id="oDiv">Text</Div>      
  315.    
  316. document.all.oDiv                       //引用图层oDiv       
  317.    
  318. document.all.oDiv.style                        
  319.    
  320. document.all.oDiv.style.display=""      //图层设置为可视       
  321.    
  322. document.all.oDiv.style.display="none"  //图层设置为隐藏   

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器