JavaScript的document对象详解

来源:百度文库 编辑:神马文学网 时间:2024/05/05 08:03:04

JavaScript的document对象详解
1、对象属性
document.title //设置文档标题等价于HTML的标签<br>document.bgColor //设置页面背景色<br>document.fgColor //设置前景色(文本颜色)<br>document.linkColor //未点击过的链接颜色<br>document.alinkColor //激活链接(焦点在此链接上)的颜色<br>document.vlinkColor //已点击过的链接颜色<br>document.URL //设置URL属性从而在同一窗口打开另一网页<br>document.fileCreatedDate //文件建立日期,只读属性<br>document.fileModifiedDate //文件修改日期,只读属性<br>document.fileSize //文件大小,只读属性<br>document.cookie //设置和读出cookie<br>document.charset //设置字符集 简体中文:gb2312<br>---------------------------------------------------------------------</p><p>2、对象方法<br>document.write() //动态向页面写入内容<br>document.createElement(Tag) //创建一个html标签对象<br>document.getElementById(ID) //获得指定ID值的对象<br>document.getElementsByName(Name) //获得指定Name值的对象<br>---------------------------------------------------------------------</p><p>3、images集合(页面中的图象)</p><p>a)通过集合引用<br>document.images //对应页面上的<img>标签<br>document.images.length //对应页面上<img>标签的个数<br>document.images[0] //第1个<img>标签 <br>document.images[i] //第i-1个<img>标签</p><p>b)通过nane属性直接引用<br><img name="oImage"><br>document.images.oImage //document.images.name属性</p><p>c)引用图片的src属性<br>document.images.oImage.src //document.images.name属性.src</p><p>d)创建一个图象<br>var oImage<br>oImage = new Image()<br>document.images.oImage.src="/1.jpg"<br>同时在页面上建立一个<img>标签与之对应就可以显示</p><p><html><br><img name=oImage><br><script language="javascript"><br>var oImage<br>oImage = new Image()<br>document.images.oImage.src="/1.jpg"<br></script><br></html></p><p>----------------------------------------------------------------------</p><p>4、forms集合(页面中的表单)</p><p>a)通过集合引用<br>document.forms //对应页面上的<form>标签<br>document.forms.length //对应页面上<form>标签的个数<br>document.forms[0] //第1个<form>标签<br>document.forms[i] //第i-1个<form>标签<br>document.forms[i].length //第i-1个<form>中的控件数<br>document.forms[i].elements[j] //第i-1个<form>中第j-1个控件</p><p>b)通过标签name属性直接引用<br><form name="Myform"><input name="myctrl"></form><br>document.Myform.myctrl //document.表单名.控件名</p><p>-----------------------------------------------------------------------<br><html><br><!--Text控件相关Script--><br><form name="Myform"><br><input type="text" name="oText"><br><input type="password" name="oPswd"><br><form><br><script language="javascript"><br>//获取文本密码框的值<br>document.write(document.Myform.oText.value)<br>document.write(document.Myform.oPswd.value)<br></script><br></html><br>-----------------------------------------------------------------------</p><p><html><br><!--Select控件相关Script--><br><form name="Myform"><br><select name="oSelect"><br><option value="1">1</option><br><option value="2">2</option><br><option value="3">3</option><br></select><br></form></p><p><script language="javascript"><br>//遍历select控件的option项<br>var length<br>length=document.Myform.oSelect.length<br>for(i=0;i<length;i++)<br>document.write(document.Myform.oSelect[i].value)<br></script></p><p><script language="javascript"><br>//遍历option项并且判断某个option是否被选中<br>for(i=0;i<document.Myform.oSelect.length;i++){<br>if(document.Myform.oSelect[i].selected!=true)<br>document.write(document.Myform.oSelect[i].value)<br>else<br>document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>") <br>}<br></script></p><p><script language="javascript"><br>//根据SelectedIndex打印出选中的option<br>//(0到document.Myform.oSelect.length-1)<br>i=document.Myform.oSelect.selectedIndex<br>document.write(document.Myform.oSelect[i].value)<br></script></p><p><script language="javascript"><br>//动态增加select控件的option项<br>var oOption = document.createElement("OPTION");<br>oOption.text="4";<br>oOption.value="4";<br>document.Myform.oSelect.add(oOption);<br></script><br><html><br>-----------------------------------------------------------------------</p><p><Div id="oDiv">Text</Div><br>document.all.oDiv //引用图层oDiv<br>document.all.oDiv.style <br>document.all.oDiv.style.display="" //图层设置为可视<br>document.all.oDiv.style.display="none" //图层设置为隐藏<br>/*document.all表示document中所有对象的集合<br>只有ie支持此属性,因此也用来判断浏览器的种类*/  <br> <br></p></div> <div class="list-group"> <a href="/article/120343" class="list-group-item">JavaScript的document对象详解</a> <a href="/article/1048844" class="list-group-item">JavaScript的document对象详解</a> <a href="/article/163237" class="list-group-item">javascript 中 document对象详解</a> <a href="/article/2017165" class="list-group-item">document对象详解</a> <a href="/article/331867" class="list-group-item">JavaScript的框架对象</a> <a href="/article/331864" class="list-group-item">JavaScript的Base对象与Body对象</a> <a href="/article/331862" class="list-group-item">JavaScript的Anchor超链接对象</a> <a href="/article/1026034" class="list-group-item">javascript中Location对象的使用(转)</a> <a href="/article/2796537" class="list-group-item">JavaScript RegExp 对象参考手册</a> <a href="/article/2517015" class="list-group-item">Javascript的调试利器:Firebug使用详解</a> <a href="/article/2784970" class="list-group-item">关于document.selection对象的介绍 - 寒云路几层的日志 - 网易博客</a> <a href="/article/794662" class="list-group-item">JavaScript Date 对象与函数</a> <a href="/article/2574393" class="list-group-item">JavaScript Switch 语句详解</a> <a href="/article/619160" class="list-group-item">JavaScript类的静态成员及其修改对象实例的数据</a> <a href="/article/12147" class="list-group-item">JSP内部对象详解</a> <a href="/article/180526" class="list-group-item">评“面向对象的JavaScript编程”一文 - past hax.sfo - CSDNBlog</a> <a href="/article/4994" class="list-group-item">JavaScript对象与数组参考大全</a> <a href="/article/23709" class="list-group-item">JavaScript教程 - 第四部分 关于form对象</a> <a href="/article/393433" class="list-group-item">JavaScript教程 - 第四部分 关于form对象</a> <a href="/article/403048" class="list-group-item">预载入和JavaScript Image()对象</a> <a href="/article/427190" class="list-group-item">预加载图片和JavaScript Image()对象</a> <a href="/article/754194" class="list-group-item">JavaScript教程 - 第四部分 关于form对象</a> <a href="/article/2223506" class="list-group-item">JavaScript教程 - 第四部分 关于form对象</a> <a href="/article/2408721" class="list-group-item">JavaScript教程 - 第四部分 关于form对象</a> </div> </div> </div> </div> </div> </div> <footer id="footer" class="footer hidden-print"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/2363001" title="成品油价格上调?受影响股一览">成品油价格上调?受影响股一览</a> <a class="btn btn-default" href="/article/2363002" title="季羡林先生的“坏人定律”">季羡林先生的“坏人定律”</a> <a class="btn btn-default" href="/article/2363003" title="如何正常恢复破坏后数据?">如何正常恢复破坏后数据?</a> <a class="btn btn-default" href="/article/2363004" title="报纸的尺寸daxiao">报纸的尺寸daxiao</a> <a class="btn btn-default" href="/article/2363005" title="想像作文之二 __板画四幅图">想像作文之二 __板画四幅图</a> <a class="btn btn-default" href="/article/2363006" title="亚洲销售女神徐鹤宁经典语录——太过精辟">亚洲销售女神徐鹤宁经典语录——太过精辟</a> <a class="btn btn-default" href="/article/2363007" title="浪子,才子,公子(转)">浪子,才子,公子(转)</a> <a class="btn btn-default" href="/article/2363008" title="指甲倒刺的预防">指甲倒刺的预防</a> <a class="btn btn-default" href="/article/2363009" title="[转贴]张鸣:历史传说的离谱之处与功效 【猫眼看人】-凯迪社区#6511559#65115...">[转贴]张鸣:历史传说的离谱之处与功效 【猫眼看人】-凯迪社区#6511559#65115...</a> <a class="btn btn-default" href="/article/2363010" title="电脑速速慢怎么办?">电脑速速慢怎么办?</a> <a class="btn btn-default" href="/article/2363011" title="不爱的最好方式是沉默">不爱的最好方式是沉默</a> <a class="btn btn-default" href="/article/2363012" title="绝世奇文--8---哲理智慧">绝世奇文--8---哲理智慧</a> <a class="btn btn-default" href="/article/2363013" title="短线止损法则和大势研判">短线止损法则和大势研判</a> <a class="btn btn-default" href="/article/2363014" title="亲爱的 我们相爱的路能走多远">亲爱的 我们相爱的路能走多远</a> <a class="btn btn-default" href="/article/2363015" title="婚外情潜在规则=">婚外情潜在规则=</a> <a class="btn btn-default" href="/article/2363016" title="江桂兰:用肯德基赚2亿的农家女 - 继续宠爱的日志 - 网易博客">江桂兰:用肯德基赚2亿的农家女 - 继续宠爱的日志 - 网易博客</a> <a class="btn btn-default" href="/article/2363017" title="中美日关系复杂化的根源是什么?-刘钧 -刘钧人民网军事-强国博客-人民网">中美日关系复杂化的根源是什么?-刘钧 -刘钧人民网军事-强国博客-人民网</a> <a class="btn btn-default" href="/article/2363018" title="让你笑的签名,可以拿去用哦 - 【休闲灌水】 - 网吧论坛 网吧技术论坛|网管技术论...">让你笑的签名,可以拿去用哦 - 【休闲灌水】 - 网吧论坛 网吧技术论坛|网管技术论...</a> <a class="btn btn-default" href="/article/2363019" title="电脑硬盘坏道如何屏蔽">电脑硬盘坏道如何屏蔽</a> <a class="btn btn-default" href="/article/2363020" title="研究证明:癌症与食物关系大">研究证明:癌症与食物关系大</a> <a class="btn btn-default" href="/article/2363021" title="亢文强">亢文强</a> <a class="btn btn-default" href="/article/2363022" title="FLASH动画播放器">FLASH动画播放器</a> <a class="btn btn-default" href="/article/2363023" title="四大秘诀教你十年挣足一千万 - 科学理财的重要性">四大秘诀教你十年挣足一千万 - 科学理财的重要性</a> <a class="btn btn-default" href="/article/2363024" title="包二奶..[说长道短]">包二奶..[说长道短]</a> <a class="btn btn-default" href="/article/2363025" title="把刮胡刀卖给女士——逆向思维">把刮胡刀卖给女士——逆向思维</a> <a class="btn btn-default" href="/article/2363026" title="深度剖露80后婚姻之痒:婚里婚外(全本)">深度剖露80后婚姻之痒:婚里婚外(全本)</a> <a class="btn btn-default" href="/article/2363027" title="女性畏寒 饮食调节">女性畏寒 饮食调节</a> <a class="btn btn-default" href="/article/2363028" title="保健指导,学会最好">保健指导,学会最好</a> <a class="btn btn-default" href="/article/2363029" title="电脑无法正常关机解决办法">电脑无法正常关机解决办法</a> <a class="btn btn-default" href="/article/2363030" title="很多国货很好,只是我们不稀罕!!!">很多国货很好,只是我们不稀罕!!!</a> <a class="btn btn-default" href="/article/2363031" title="好友日志">好友日志</a> </div> </div></div> <div class="copy-right"> <p>神马文学网,客观、专业、权威的知识性互动百科全书。</p></div> </footer> </body> </html>