难爱by夏礼智下载:JavaScript中document用法小结——DOM

来源：百度文库编辑：九乡新闻网时间：2024/05/17 07:41:31

【转】 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 //对应页面上的<mip-img>标签<br>document.images.length //对应页面上<mip-img>标签的个数<br>document.images[0] //第1个<mip-img>标签<br>document.images[i] //第i-1个<mip-img>标签<br>b)通过nane属性直接引用<br>代码<br><mip-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>同时在页面上建立一个<mip-img>标签与之对应就可以显示<br>代码<br><html><br><mip-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><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><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 //对应页面上的<mip-img>标签<br>document.images.length //对应页面上<mip-img>标签的个数<br>document.images[0] //第1个<mip-img>标签<br>document.images[i] //第i-1个<mip-img>标签<br>b)通过nane属性直接引用<br><mip-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>同时在页面上建立一个<mip-img>标签与之对应就可以显示<br><html><br><mip-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><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><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><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").s=""<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="zuoye-list-a"> <a href="/article/jpszgo">JavaScript中document用法小结——DOM</a> <a href="/article/jppiln">Javascript Document</a> <a href="/article/jqgcwr">document.location小结</a> <a href="/article/jrkmcw">dear在口语中用法小结</a> <a href="/article/jqyggd">Java开发笔记 — JAXP DOM</a> <a href="/article/jpyppr">document.execCommand()的用法小记</a> <a href="/article/jnlsfa">DOM</a> <a href="/article/jnyxbj">MsgBox函数用法小结</a> <a href="/article/jopirs">Happen 用法小结</a> <a href="/article/jopisk">Call用法小结</a> <a href="/article/jpxrey">INADDR_ANY的用法小结</a> <a href="/article/jrglzx">Oracle spool 用法小结</a> <a href="/article/jrmjhe">Find 用法小结</a> <a href="/article/jnprzj">typedef用法小结（转）</a> <a href="/article/jokfwb">介词 for 的用法小结</a> <a href="/article/jpsvaj">What的特殊用法小结</a> <a href="/article/jqlxnf">初中英语被动语态用法小结</a> <a href="/article/jrlbjo">You are welcome. 用法小结</a> <a href="/article/jrnsfb">初中英语被动语态用法小结</a> <a href="/article/jlzmpu">document类的用法归总 - keep on - JavaEye技术网站</a> <a href="/article/jmhfsw">抽象名词具体化用法小结2</a> <a href="/article/jmisqn">初中英语被动语态用法小结000</a> <a href="/article/joxlga">小升初英语语法：介词for的用法小结</a> <a href="/article/jqamih">[保留] awk用法小结（作者总结）</a> </div> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="footerlinks"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/jnpqea" title="2011.5.9长江三峡原貌（难得一见了）">2011.5.9长江三峡原貌（难得一见了）</a> <a class="btn btn-default" href="/article/jnpqeb" title="社科院城市幸福感排名石家庄居首被指不符常识">社科院城市幸福感排名石家庄居首被指不符常识</a> <a class="btn btn-default" href="/article/jnpqec" title="那你就害我吧">那你就害我吧</a> <a class="btn btn-default" href="/article/jnpqed" title="张爱玲经典语录12">张爱玲经典语录12</a> <a class="btn btn-default" href="/article/jnpqee" title="魔油魔膏魔精大厨调味全靠添加剂变魔术（图）">魔油魔膏魔精大厨调味全靠添加剂变魔术（图）</a> <a class="btn btn-default" href="/article/jnpqef" title="认清庄家【四十一】">认清庄家【四十一】</a> <a class="btn btn-default" href="/article/jnpqeg" title="集装箱基础知识1">集装箱基础知识1</a> <a class="btn btn-default" href="/article/jnpqeh" title="持续成交量战法">持续成交量战法</a> <a class="btn btn-default" href="/article/jnpqei" title="科学家指出人的脑电波可以取代电视遥控器">科学家指出人的脑电波可以取代电视遥控器</a> <a class="btn btn-default" href="/article/jnpqej" title="渔舟唱晚【组图】">渔舟唱晚【组图】</a> <a class="btn btn-default" href="/article/jnpqek" title="杨小妮与Rabbit的情侣合照头像">杨小妮与Rabbit的情侣合照头像</a> <a class="btn btn-default" href="/article/jnpqel" title="患癌母亲为保腹中子放弃化疗母爱感动网友">患癌母亲为保腹中子放弃化疗母爱感动网友</a> <a class="btn btn-default" href="/article/jnpqem" title="湖南邵阳计生官员抢婴儿牟利每名3000美元外销">湖南邵阳计生官员抢婴儿牟利每名3000美元外销</a> <a class="btn btn-default" href="/article/jnpqen" title="深圳市原市长许宗衡受贿3300多万一审被判死缓">深圳市原市长许宗衡受贿3300多万一审被判死缓</a> <a class="btn btn-default" href="/article/jnpqeo" title="家居窍门妙招大全">家居窍门妙招大全</a> <a class="btn btn-default" href="/article/jnpqep" title="简单道理简单画">简单道理简单画</a> <a class="btn btn-default" href="/article/jnpqeq" title="HH腰椎间盘突出根本原因是气虚（附特效方)">HH腰椎间盘突出根本原因是气虚（附特效方)</a> <a class="btn btn-default" href="/article/jnpqer" title="侠客行">侠客行</a> <a class="btn btn-default" href="/article/jnpqes" title="自己当专家平板电视接口应用完整解析">自己当专家平板电视接口应用完整解析</a> <a class="btn btn-default" href="/article/jnpqet" title="相思花悄悄地开【图文】">相思花悄悄地开【图文】</a> <a class="btn btn-default" href="/article/jnpqeu" title="晰美女">晰美女</a> <a class="btn btn-default" href="/article/jnpqev" title="牵挂是一种忧伤的幸福">牵挂是一种忧伤的幸福</a> <a class="btn btn-default" href="/article/jnpqew" title="英语经典口语">英语经典口语</a> <a class="btn btn-default" href="/article/jnpqex" title="教学案例撰写七种1">教学案例撰写七种1</a> <a class="btn btn-default" href="/article/jnpqey" title="女人其实">女人其实</a> <a class="btn btn-default" href="/article/jnpqez" title="3d彩票玩法技巧两码口诀捉金胆1">3d彩票玩法技巧两码口诀捉金胆1</a> <a class="btn btn-default" href="/article/jnpqfa" title="一般人增值税账务处理大全">一般人增值税账务处理大全</a> <a class="btn btn-default" href="/article/jnpqfb" title="柯云路：最易让男人出轨的三种女人（图）">柯云路：最易让男人出轨的三种女人（图）</a> <a class="btn btn-default" href="/article/jnpqfc" title="方法得当持之以恒轻松享“瘦”">方法得当持之以恒轻松享“瘦”</a> <a class="btn btn-default" href="/article/jnpqfd" title="接吻的益处！">接吻的益处！</a> <a class="btn btn-default" href="/article/jnpqfe" title="山西贫困县小官疯狂敛财2000余万 "欺负"走三任局长时政聚焦南方网">山西贫困县小官疯狂敛财2000余万 "欺负"走三任局长时政聚焦南方网</a> </div> </div> </div> <div class="copy-right"> <p>九乡新闻网，客观、专业、权威的知识性互动百科全书。</p></div> </div> </div>  <mip-stats-baidu> <script type="application/json"> { "token": "97cc1851a34f9e233119ff36ecf54098", "_setCustomVar": [1, "login", "1", 2], "_setAutoPageview": [true] } </script> </mip-stats-baidu> <script src="https://c.mipcdn.com/static/v1/mip.js"></script>  <script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script>  <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script> </body> </html>