JavaScript:document对象方法属性大全 在JavaScript中document对象是一个极为常见的对象，提供丰富的属性和方法，使用起来也非常的方便。下面我来总结一下这些属性和方法，以备您在使用中随时可以查看。
注意：在JavaScript中对象的属性和方法是严格区分大小写的，所以您一定要按正确的大小写来使用，否则会出现无法找到对象或方法的提示。
document对象属性
document.getElementById("cc").getElementsByTagName("input");
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 document对象方法<br>document.write() //动态向页面写入内容<br>document.createElement(Tag) //创建一个html标签对象<br>document.getElementById(ID) //获得指定ID值的对象<br>document.getElementsByName(Name) //获得指定Name值的对象<br>document.body.appendChild(oTag)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对象 document常用对象事件<br>document.body.onclick="func()" //鼠标指针单击对象是触发<br>document.body.onmouseover="func()" //鼠标指针移到对象时触发<br>document.body.onmouseout="func()" //鼠标指针移出对象时触发 document.location-位置子对象<br>document.location.hash // #号后的部分<br>document.location.host // 域名+端口号<br>document.location.hostname // 域名<br>document.location.href // 完整URL<br>document.locatio<br></p><!--/p1--><!--p2--><p>n.pathname // 目录部分<br>document.location.port // 端口号<br>document.location.protocol // 网络协议(http:)<br>document.location.search // ?号后的部分<br><br>documeny.location.reload() //刷新网页<br>document.location.reload(URL) //打开新的网页<br>document.location.assign(URL) //打开新的网页<br>document.location.replace(URL) //打开新的网页 selection-选区子对象<br>document.selection document.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><br>b)通过nane属性直接引用<br><img name="oImage"><br>document.images.oImage //https://www.wendangku.net/doc/c7463749.html,属性<br><br>c)引用图片的src属性<br>document.images.oImage.src //https://www.wendangku.net/doc/c7463749.html,属性.src<br><br>d)创建一个图象<br>var oImage<br>oImage = new Image()<br>document.images.oImage.src="1.jpg"<br>同时在页面上建立一个<img>标签与之对应就可以显示 document.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><br>b)通过标签name属性直接引用<br><form name="Myform"><input name="myctrl"></form><br>document.Myform.myctrl //document.表单名.控件名<br><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><br>document.forms[i].appendChild(oTag) //动态插入一个控件 实例演示1：<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> 实例演示2：<br><html><br><!--checkbox,radio控件相关script--><br><form name="Myform"><br><input _cke_saved_name="Myform"><br><input _cke_saved_name="Myform"><br><input _cke_saved_name="Myform"><br><input _cke_saved_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<br></p><!--/p2--><!--p3--><p>=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> 实例演示3：<br><html><br><!--Select控件相关Script--><br><form name="Myform"><br><select _cke_saved_name="Myform"><br><select _cke_saved_name="Myform"><br><select _cke_saved_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><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><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><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><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.getElementById("oDiv") //通过getElementById引用对象<br>document.getElementById("oDiv").style=""<br>document.getElementById("oDiv").display="none"<br>/*document.all表示document中所有对象的集合<br>只有ie支持此属性，因此也用来判断浏览器的种类*/ 图层对象的4个属性<br>document.getElementById("ID").innerText //动态输出文本<br>document.getElementById("ID").innerHTML //动态输出HTML<br>document.getElementById("ID").outerText //同innerText<br>document.getElementById("ID").outerHTML //同innerHTML 实例演示4：<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><br> 实例演示5：<br><br><html><br><script language="javascript"><br>function changeText(){<br>document.getElementById("oDiv").innerText="NewText"<br>}<br></script><br><Div id="oDiv" on<br></p><!--/p3--><!--p4--><p>mouseover="changeText()">Text</Div><br></html><br></p><!--/p4--></div>
<div class="pagiv">
</div>
</div>
<div>
<div>相关文档</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="19325963"><a href="/topic/19325963/" target="_blank">console方法属性大全</a></li>
<li id="19420653"><a href="/topic/19420653/" target="_blank">窗口对象的属性和方法</a></li>
<li id="12858148"><a href="/topic/12858148/" target="_blank">9的口诀记忆方法大全</a></li>
<li id="15064573"><a href="/topic/15064573/" target="_blank">表单对象的常用属性</a></li>
<li id="5383783"><a href="/topic/5383783/" target="_blank">可控硅的使用方法大全</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="category">
<span class="navname">相关文档</span>
<ul class="lista">
<li><a href="/doc/5b7506746.html" target="_blank">实验一、交换机console和telnet配置方式</a></li>
<li><a href="/doc/8513163436.html" target="_blank">ConsoleKeyInfo结构使用方法</a></li>
<li><a href="/doc/b317484532.html" target="_blank">任务1.1 通过Console方法登录交换机</a></li>
<li><a href="/doc/1011895743.html" target="_blank">拓展项目1.1 使用Console方式管理交换机及参数配置</a></li>
<li><a href="/doc/f07222193.html" target="_blank">H3C设备通过Console口登录设备的配置方法介绍</a></li>
<li><a href="/doc/3e18591075.html" target="_blank">HC设备通过Console口登录设备的配置方法介绍</a></li>
<li><a href="/doc/6a14934221.html" target="_blank">Cisco路由器console口的两种连接方法</a></li>
<li><a href="/doc/9b14829754.html" target="_blank">火狐浏览器中firebug调试console命令大全</a></li>
<li><a href="/doc/d86216022.html" target="_blank">H3C设备通过Console口登录设备的配置办法介绍</a></li>
<li><a href="/doc/2a14928486.html" target="_blank">console方法属性大全</a></li>
<li><a href="/doc/501421084.html" target="_blank">获取一个类里面的所有属性和方法</a></li>
<li><a href="/doc/8f718989.html" target="_blank">H3C设备通过Console口登录设备的配置方法介绍</a></li>
<li><a href="/doc/a618754647.html" target="_blank">超级终端使用方法汇总</a></li>
<li><a href="/doc/029383479.html" target="_blank">H3C设备通过Console口登录设备的配置方法介绍</a></li>
<li><a href="/doc/f53061663.html" target="_blank">console口简介</a></li>
<li><a href="/doc/3f10119988.html" target="_blank">控件命令大全</a></li>
<li><a href="/doc/6a4558105.html" target="_blank">ControlConsole用户指南</a></li>
<li><a href="/doc/9912790859.html" target="_blank">Cisco路由器console口的两种连接方法</a></li>
<li><a href="/doc/ca17107450.html" target="_blank">Chrome 控制台console的用法</a></li>
<li><a href="/doc/297979289.html" target="_blank">console登录设备</a></li>
</ul>
<span class="navname">最新文档</span>
<ul class="lista">
<li><a href="/doc/0719509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li>
<li><a href="/doc/0e19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li>
<li><a href="/doc/9319184372.html" target="_blank">自然教育课件</a></li>
<li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li>
<li><a href="/doc/db19211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li>
<li><a href="/doc/af19240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li>
<li><a href="/doc/9919184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li>
<li><a href="/doc/8b19195909.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/8019195910.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li>
<li><a href="/doc/7a19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li>
<li><a href="/doc/6719035160.html" target="_blank">高考语文知识点总结高中</a></li>
<li><a href="/doc/6a19035161.html" target="_blank">高中语文知识点总结归纳</a></li>
<li><a href="/doc/4d19232289.html" target="_blank">高中语文知识点整理总结</a></li>
<li><a href="/doc/3a19258758.html" target="_blank">高中语文知识点归纳</a></li>
<li><a href="/doc/2519396978.html" target="_blank">高中语文知识点归纳(大全)</a></li>
<li><a href="/doc/2419396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li>
<li><a href="/doc/1f19338136.html" target="_blank">高中语文基础知识点整理</a></li>
<li><a href="/doc/ef19066069.html" target="_blank">化工厂应急预案</a></li>
<li><a href="/doc/bc19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "c05cf82c7375a417866f8f6e";
</script>
<div class="footer">
<p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2013-2023 www.wendangku.net <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p>
<p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a> 本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p>
</div>
<script type="text/javascript">foot();</script>
</div>
</body>
</html>