九乡新闻网难爱by夏礼智下载:JavaScript中document用法小结——DOM
来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 01:23:33
【转】 JavaScript中document用法小结——DOM
2011-08-19 13:48
转载自 kkdantes
最终编辑 hhazhe
详细讲解JavaScript脚本语言的 document 对象者：整理对象属性
代码
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>对象方法<br>代码<br>document.write() //动态向页面写入内容<br>document.createElement(Tag) //创建一个html标签对象<br>document.getElementById(ID) //获得指定ID值的对象<br>document.getElementsByName(Name) //获得指定Name值的对象<br>images集合(页面中的图象)<br>a)通过集合引用<br>代码<br>document.images //对应页面上的<img>标签<br>document.images.length //对应页面上<img>标签的个数<br>document.images[0] //第1个<img>标签<br>document.images[i] //第i-1个<img>标签<br>b)通过nane属性直接引用<br>代码<br><img name="oImage"><br>document.images.oImage //document.images.name属性<br>c)引用图片的src属性<br>代码<br>document.images.oImage.src //document.images.name属性.src<br>d)创建一个图象<br>代码<br>var oImage<br>oImage = new Image()<br>document.images.oImage.src="/1.jpg"<br>同时在页面上建立一个<img>标签与之对应就可以显示<br>代码<br><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><br>forms集合(页面中的表单)<br>a)通过集合引用<br>代码<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个控件<br>b)通过标签name属性直接引用<br>代码<br><form name="Myform"><input name="myctrl"></form><br>document.Myform.myctrl //document.表单名.控件名<br>代码<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>代码<br><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><br><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><br><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><br><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><br><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>代码<br><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>document 文挡对象 - JavaScript脚本语言描述<br>---------------------------------------------------------------------<br>注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写<br>否则会提示你一个错误信息 "引用的元素为空或者不是对象"<br>---------------------------------------------------------------------<br>对象属性<br>document.title //设置文档标题等价于HTML的<title>标签<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>---------------------------------------------------------------------<br>常用对象方法<br>document.write() //动态向页面写入内容<br>document.createElement(Tag) //创建一个html标签对象<br>document.getElementById(ID) //获得指定ID值的对象<br>document.getElementsByName(Name) //获得指定Name值的对象<br>document.body.appendChild(oTag)<br>---------------------------------------------------------------------<br>body-主体子对象<br>document.body //指定文档主体的开始和结束等价于<body></body><br>document.body.bgColor //设置或获取对象后面的背景颜色<br>document.body.link //未点击过的链接颜色<br>document.body.alink //激活链接(焦点在此链接上)的颜色<br>document.body.vlink //已点击过的链接颜色<br>document.body.text //文本色<br>document.body.innerText //设置<body>...</body>之间的文本<br>document.body.innerHTML //设置<body>...</body>之间的HTML代码<br>document.body.topMargin //页面上边距<br>document.body.leftMargin //页面左边距<br>document.body.rightMargin //页面右边距<br>document.body.bottomMargin //页面下边距<br>document.body.background //背景图片<br>document.body.appendChild(oTag) //动态生成一个HTML对象<br>常用对象事件<br>document.body.onclick="func()" //鼠标指针单击对象是触发<br>document.body.onmouseover="func()" //鼠标指针移到对象时触发<br>document.body.onmouseout="func()" //鼠标指针移出对象时触发<br>---------------------------------------------------------------------<br>location-位置子对象<br>document.location.hash // #号后的部分<br>document.location.host // 域名+端口号<br>document.location.hostname // 域名<br>document.location.href // 完整URL<br>document.location.pathname // 目录部分<br>document.location.port // 端口号<br>document.location.protocol // 网络协议(http:)<br>document.location.search // ?号后的部分<br>documeny.location.reload() //刷新网页<br>document.location.reload(URL) //打开新的网页<br>document.location.assign(URL) //打开新的网页<br>document.location.replace(URL) //打开新的网页<br>---------------------------------------------------------------------<br>selection-选区子对象<br>document.selection<br>---------------------------------------------------------------------<br>images集合(页面中的图象)<br>a)通过集合引用<br>document.images //对应页面上的<img>标签<br>document.images.length //对应页面上<img>标签的个数<br>document.images[0] //第1个<img>标签<br>document.images[i] //第i-1个<img>标签<br>b)通过nane属性直接引用<br><img name="oImage"><br>document.images.oImage //document.images.name属性<br>c)引用图片的src属性<br>document.images.oImage.src //document.images.name属性.src<br>d)创建一个图象<br>var oImage<br>oImage = new Image()<br>document.images.oImage.src="1.jpg"<br>同时在页面上建立一个<img>标签与之对应就可以显示<br><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><br><html><br><script language="javascript"><br>oImage=document.caeateElement("IMG")<br>oImage.src="1.jpg"<br>document.body.appendChild(oImage)<br></script><br></html><br>----------------------------------------------------------------------<br>forms集合(页面中的表单)<br>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个控件<br>b)通过标签name属性直接引用<br><form name="Myform"><input name="myctrl"></form><br>document.Myform.myctrl //document.表单名.控件名<br>c)访问表单的属性<br>document.forms[i].name //对应<form name>属性<br>document.forms[i].action //对应<form action>属性<br>document.forms[i].encoding //对应<form enctype>属性<br>document.forms[i].target //对应<form target>属性<br>document.forms[i].appendChild(oTag) //动态插入一个控件<br>-----------------------------------------------------------------------<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>-----------------------------------------------------------------------<br><html><br><!--checkbox,radio控件相关script--><br><form name="Myform"><br><input type="checkbox" name="chk" value="1">1<br><input type="checkbox" name="chk" value="2">2<br></form><br><script language="javascript"><br>function fun(){<br>//遍历checkbox控件的值并判断是否选中<br>var length<br>length=document.forms[0].chk.length<br>for(i=0;i<length;i++){<br>v=document.forms[0].chk[i].value<br>b=document.forms[0].chk[i].checked<br>if(b)<br>alert(v=v+"被选中")<br>else<br>alert(v=v+"未选中")<br>}<br>}<br></script><br><a href=# onclick="fun()">ddd</a><br></html><br>-----------------------------------------------------------------------<br><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><br><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><br><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><br><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><br><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>-----------------------------------------------------------------------<br><Div id="oDiv">Text</Div><br>document.all.oDiv //引用图层oDiv<br>document.all.oDiv.style.display="" //图层设置为可视<br>document.all.oDiv.style.display="none" //图层设置为隐藏<br>document.getElementId("oDiv") //通过getElementId引用对象<br>document.getElementId("oDiv").style=""<br>document.getElementId("oDiv").display="none"<br>/*document.all表示document中所有对象的集合<br>只有ie支持此属性，因此也用来判断浏览器的种类*/<br>图层对象的4个属性<br>document.getElementById("ID").innerText //动态输出文本<br>document.getElementById("ID").innerHTML //动态输出HTML<br>document.getElementById("ID").outerText //同innerText<br>document.getElementById("ID").outerHTML //同innerHTML<br><html><br><script language="javascript"><br>function change(){<br>document.all.oDiv.style.display="none"<br>}<br></script><br><Div id="oDiv" onclick="change()">Text</Div><br></html><br><html><br><script language="javascript"><br>function changeText(){<br>document.getElementById("oDiv").innerText="NewText"<br>}<br></script><br><Div id="oDiv" onmouseover="changeText()">Text</Div><br></html></div>
<div class="list-group">
<a href="/article/jpszgo" class="list-group-item">JavaScript中document用法小结——DOM</a>
<a href="/article/jppiln" class="list-group-item">Javascript Document</a>
<a href="/article/jqgcwr" class="list-group-item">document.location小结</a>
<a href="/article/jrkmcw" class="list-group-item">dear在口语中用法小结</a>
<a href="/article/jqyggd" class="list-group-item">Java开发笔记 — JAXP DOM</a>
<a href="/article/jpyppr" class="list-group-item">document.execCommand()的用法小记</a>
<a href="/article/jnlsfa" class="list-group-item">DOM</a>
<a href="/article/jnyxbj" class="list-group-item">MsgBox函数用法小结</a>
<a href="/article/jopirs" class="list-group-item">Happen 用法小结</a>
<a href="/article/jopisk" class="list-group-item">Call用法小结</a>
<a href="/article/jpxrey" class="list-group-item">INADDR_ANY的用法小结</a>
<a href="/article/jrglzx" class="list-group-item">Oracle spool 用法小结</a>
<a href="/article/jrmjhe" class="list-group-item">Find 用法小结</a>
<a href="/article/jnprzj" class="list-group-item">typedef用法小结（转）</a>
<a href="/article/jokfwb" class="list-group-item">介词 for 的用法小结</a>
<a href="/article/jpsvaj" class="list-group-item">What的特殊用法小结</a>
<a href="/article/jqlxnf" class="list-group-item">初中英语被动语态用法小结</a>
<a href="/article/jrlbjo" class="list-group-item">You are welcome. 用法小结</a>
<a href="/article/jrnsfb" class="list-group-item">初中英语被动语态用法小结</a>
<a href="/article/jlzmpu" class="list-group-item">document类的用法归总 - keep on - JavaEye技术网站</a>
<a href="/article/jmhfsw" class="list-group-item">抽象名词具体化用法小结2</a>
<a href="/article/jmisqn" class="list-group-item">初中英语被动语态用法小结000</a>
<a href="/article/joxlga" class="list-group-item">小升初英语语法：介词for的用法小结</a>
<a href="/article/jqamih" class="list-group-item">[保留] awk用法小结（作者总结）</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/jqlklb" title="男人性能力">男人性能力</a>
<a class="btn btn-default" href="/article/jqlklc" title="中国人民武装警察部队后勤学院">中国人民武装警察部队后勤学院</a>
<a class="btn btn-default" href="/article/jqlkld" title="与幼儿一起阅读的好方法">与幼儿一起阅读的好方法</a>
<a class="btn btn-default" href="/article/jqlkle" title="施展一个让XP快上几倍的魔法">施展一个让XP快上几倍的魔法</a>
<a class="btn btn-default" href="/article/jqlklf" title="【组图】高清极致，美轮美奂">【组图】高清极致，美轮美奂</a>
<a class="btn btn-default" href="/article/jqlklg" title="【情感】让男人头疼不已的六类悍妇">【情感】让男人头疼不已的六类悍妇</a>
<a class="btn btn-default" href="/article/jqlklh" title="社会现象“顺口溜”（典型）">社会现象“顺口溜”（典型）</a>
<a class="btn btn-default" href="/article/jqlkli" title="宋山木同一间房性侵人次调查（之二）">宋山木同一间房性侵人次调查（之二）</a>
<a class="btn btn-default" href="/article/jqlklj" title="江一燕蓝衣飘飘展童真（组图）">江一燕蓝衣飘飘展童真（组图）</a>
<a class="btn btn-default" href="/article/jqlklk" title="专家的运动狠招对付全身赘肉1">专家的运动狠招对付全身赘肉1</a>
<a class="btn btn-default" href="/article/jqlkll" title="这思考的窑洞">这思考的窑洞</a>
<a class="btn btn-default" href="/article/jqlklm" title="时间淡忘昔日情">时间淡忘昔日情</a>
<a class="btn btn-default" href="/article/jqlkln" title="人之所以痛苦，在于追求错误的东西">人之所以痛苦，在于追求错误的东西</a>
<a class="btn btn-default" href="/article/jqlklo" title="初二到初三的所有物理单位1">初二到初三的所有物理单位1</a>
<a class="btn btn-default" href="/article/jqlklp" title="惊艳！悉尼年薪60万的职业“美人鱼”（组图）">惊艳！悉尼年薪60万的职业“美人鱼”（组图）</a>
<a class="btn btn-default" href="/article/jqlklq" title="解读肥胖，瘦身你可轻松拥有2">解读肥胖，瘦身你可轻松拥有2</a>
<a class="btn btn-default" href="/article/jqlklr" title="养眼！你懂得！[贴图]">养眼！你懂得！[贴图]</a>
<a class="btn btn-default" href="/article/jqlkls" title="夜凉如水【图文】">夜凉如水【图文】</a>
<a class="btn btn-default" href="/article/jqlklt" title="中国人民武装警察部队警官学院">中国人民武装警察部队警官学院</a>
<a class="btn btn-default" href="/article/jqlklu" title="依托党校资源构建立体教育模式 推动党风廉政建设深入开展">依托党校资源构建立体教育模式 推动党风廉政建设深入开展</a>
<a class="btn btn-default" href="/article/jqlklv" title="每天睡得好，八十不见老">每天睡得好，八十不见老</a>
<a class="btn btn-default" href="/article/jqlklw" title="【佳片U约】中国电影：《东风雨》">【佳片U约】中国电影：《东风雨》</a>
<a class="btn btn-default" href="/article/jqlklx" title="清丝靓影">清丝靓影</a>
<a class="btn btn-default" href="/article/jqlkly" title="税种介绍：营业税、印花税、消费税">税种介绍：营业税、印花税、消费税</a>
<a class="btn btn-default" href="/article/jqlklz" title="夏日中的老爷车与俄罗斯靓女">夏日中的老爷车与俄罗斯靓女</a>
<a class="btn btn-default" href="/article/jqlkma" title="中国人民武装警察部队工程大学">中国人民武装警察部队工程大学</a>
<a class="btn btn-default" href="/article/jqlkmb" title="【动物】哪些动物能从镜子里能认出自己？">【动物】哪些动物能从镜子里能认出自己？</a>
<a class="btn btn-default" href="/article/jqlkmc" title="一个成功的男*写给我们的这些话">一个成功的男*写给我们的这些话</a>
<a class="btn btn-default" href="/article/jqlkmd" title="直播欧洲人夏季的山水豪情">直播欧洲人夏季的山水豪情</a>
<a class="btn btn-default" href="/article/jqlkme" title="朱学范">朱学范</a>
<a class="btn btn-default" href="/article/jqlkmf" title="让女人丑陋的最根本原因1">让女人丑陋的最根本原因1</a>
</div>
</div></div>
<div class="copy-right">
<p>九乡新闻网，客观、专业、权威的知识性互动百科全书。</p></div>
</footer>
<div class="copy-right"> <div class="container">
<div class="col-md-12">
<a href="https://www.q-5.net/" target="_blank">最新新闻</a> <a href="https://www.wacths.com/" target="_blank">沃茨手表网</a>
<a href="https://www.csdndoc.com/" target="_blank">CSDN程序文档</a>
<a href="https://www.cmjoy.com/" target="_blank">上海旅游网</a> <a href="https://www.smbaike.com/" target="_blank">神马百科</a> <a href="https://www.familylifemag.com/" target="_blank">程序博客</a>
<a href="https://www.xjpta.cn/" target="_blank">香蕉皮作业帮</a> <a href="https://www.cidugushi.com/" target="_blank">景德镇新闻网</a> <a href="https://www.uyuyao.com/" target="_blank">余姚信息网</a>
<a href="https://www.zuoyewang.cc/" target="_blank">作业帮作业网</a> <a href="https://www.wenda8.com/" target="_blank">互助问答吧</a> <a href="https://www.16lo.com/" target="_blank">16楼社区</a>
<a href="https://www.zyebang.com/">解题作业帮</a><a href="https://www.6210k.com/">艺术百科</a><a href="http://www.ld5.top/">亮点网</a><a href="http://www.smbaike.com/">神马百科</a>
<a href="https://www.smwenxue.com/">神马文学网</a>
<a href="https://www.zuoye5.com/">拍题作业网</a>
<a href="https://www.uczhidao.com/">UC知道</a>
<a href="https://www.52sanwen.top/">我爱散文网</a>
<a href="https://www.bfwang.top/">北方网</a>
<a href="https://www.kexue5.top/">科学网</a>
<a href="https://www.wenku1.top/">第一文库网</a>
<a href="https://www.wszyw.top/">微思作业网</a>
<a href="https://www.wz51.top/">我要文章网</a>
<a href="https://www.dsp33.cn/">都市新闻网</a><a href="https://www.xofi.com.cn/">西欧教育</a><a href="https://www.xs2xf.cn/">西山新闻网</a><a href="https://www.holoes.com.cn/">好楼房产信息网</a>
<a href="https://www.9x1x.cn/">九乡新闻网</a><a href="https://www.vnql.com.cn/">农企信息网</a><a href="https://www.xnvm.com.cn/">仙女们写真照片</a><a href="https://www.lumta.com.cn/">音乐简谱网</a><a href="https://www.miliya.com.cn/">米粒芽</a><a href="https://www.xuexiaodaquan.net/">学校大全网</a><a href="https://www.wz95.cn/">95后网站</a><a href="https://www.ranatlanta.cn/">汝南网</a><a href="https://www.opuo.com.cn/">欧普网</a><a href="https://www.7c4.com.cn/">宝宝故事网</a>
<a href="https://www.pp6a.cn/">神马品牌网</a>
<a href="https://www.hzxzt.com.cn/">杭州交通信息网/"></a>
<a href="https://www.hzsgz.com.cn/">杭州市高中教育平台</a>
<a href="https://www.crrcn.cn/">查人人中国名人网</a>
<a href="https://www.amzr.com.cn/">爱美之人</a>
<a href="https://www.scmpx.com.cn/">上车买票</a>
<a href="https://www.azxt.com.cn/">安卓系统之家</a>
<a href="https://www.520sdw.cn/">中科新闻网</a>
<a href="https://www.218zy.cn/">科学院研究所</a>
<a href="https://www.ekowh.cn/">高考快车</a>
<a href="https://www.520gsw.cn/">高考志愿帮</a>
<a href="https://www.madbar.cn/">大学志愿大全</a>
<a href="https://www.oisogo.cn/">高校问答</a>
<a href="https://www.togowu.cn/">高考问答</a>
<a href="https://www.mdeusa.cn/">中考百科</a>
<a href="https://www.520bzw.cn/">大学知道</a>
<a href="https://www.9uwang.cn/">久游网</a>
</div></div></div> </body>
</html>
2011-08-19 13:48
转载自 kkdantes
最终编辑 hhazhe
详细讲解JavaScript脚本语言的 document 对象者：整理对象属性
代码
document.title //设置文档标题等价于HTML的