代码如下:
document.title //设置文档标题等价于HTML的
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 />
</div></p>
<p>======================================================================<br />
body-主体子对象</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code51821"><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 />
</div></p>
<p>常用对象事件</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code29794"><br />
document.body.onclick="func()" //鼠标指针单击对象是触发<br />
document.body.onmouseover="func()" //鼠标指针移到对象时触发<br />
document.body.onmouseout="func()" //鼠标指针移出对象时触发<br />
</div></p>
<p>======================================================================<br />
location-位置子对象</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code69315"><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 />
</div></p>
<p>常用对象事件</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code50752"><br />
documeny.location.reload() //刷新网页<br />
document.location.reload(URL) //打开新的网页<br />
document.location.assign(URL) //打开新的网页<br />
document.location.replace(URL) //打开新的网页<br />
</div></p>
<p>======================================================================<br />
images集合(页面中的图象)<br />
a)通过集合引用</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code32999"><br />
document.images //对应页面上的<img>标签<br />
document.images.length //对应页面上<img>标签的个数<br />
document.images[0] //第1个<img>标签<br />
document.images //第i-1个<img>标签<br />
</div></p>
<p>b)通过name属性直接引用</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code59702"><br />
<img name="oImage"><br />
document.images.oImage //document.images.name属性<br />
</div></p>
<p>c)引用图片的src属性</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code29446"><br />
document.images.oImage.src //document.images.name属性.src<br />
</div></p>
<p>d)创建一个图象</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code96333"><br />
var oImage<br />
oImage = new Image()<br />
document.images.oImage.src="http://img.gxlcms.com/http://img.gxlcms.com/1.jpg"<br />
</div></p>
<p>同时在页面上建立一个<img>标签与之对应就可以显示<br />
示例代码(动态创建图象)：</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code95670"><br />
<html><br />
<img name=oImage><br />
<script language="javascript"><br />
var oImage<br />
oImage = new Image()<br />
document.images.oImage.src="http://img.gxlcms.com/http://img.gxlcms.com/1.jpg"<br />
</ script><br />
</html><br />
<html><br />
<script language="javascript"><br />
oImage=document.caeateElement("IMG")<br />
oImage.src="http://img.gxlcms.com/http://img.gxlcms.com/1.jpg"<br />
document.body.appendChild(oImage)<br />
</ script><br />
</html><br />
</div></p>
<p>=====================================================================<br />
forms集合(页面中的表单)<br />
a)通过集合引用</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code71103"><br />
document.forms //对应页面上的<br />
document.Myform.myctrl //document.表单名.控件名<br />
</div></p>
<p>----------------------------<br />
c)访问表单的属性</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code97142"><br />
document.forms.name //对应 <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.value <br />
b=document.forms[0].chk.checked <br />
if(b) <br />
alert(v=v+"被选中") <br />
else <br />
alert(v=v+"未选中") <br />
} <br />
} <br />
</ script> <br />
ddd <br />
</html> <br />
</div></p>
<p>----------------------------<br />
示例代码(Select)：</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code91802"><br />
<html><br />
<!--Select控件相关Script--><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.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.selected!=true)<br />
document.write(document.Myform.oSelect.value)<br />
else<br />
document.write("<font color=red>"+document.Myform.oSelect.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.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 />
</div></p>
<p>======================================================================<br />
Div集合(页面中的层)</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code56149"><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").<br />
document.getElementId("oDiv").display="none"<br />
/*document.all表示document中所有对象的集合<br />
只有ie支持此属性，因此也用来判断浏览器的种类*/<br />
</div></p>
<p>图层对象的4个属性</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code89666"><br />
document.getElementById("ID").innerText //动态</script></pre>输出文本<br />
document.getElementById("ID").innerHTML //动态</script></pre>输出HTML<br />
document.getElementById("ID").outerText //同innerText<br />
document.getElementById("ID").outerHTML //同innerHTML<br />
</div></p>
<p>----------------------------<br />
示例代码：</p>
<p><div class="codetitle"><span><U></U></span> 代码如下:</div><div class="codebody" id="code62558"><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><br />
</div> </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
layui.code({
elem: 'pre', //默认值为.layui-code
about:false,
title:'JavaScript中document对象使用详解_基础知识代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
<ul class="channels">
<li>
<a target="_top" href="/system/">操作系统</a>
</li><li>
<a target="_top" href="/down/">程序下载</a>
</li><li>
<a target="_top" href="/jquery/">jquery插件库</a>
</li><li>
<a target="_top" href="/jiaoben/">编程</a>
</li><li>
<a target="_top" href="/db/">数据库</a>
</li><li>
<a target="_top" href="/tools/">在线工具</a>
</li><li>
<a target="_top" href="/framebook/">框架书籍</a>
</li><li>
<a target="_top" href="/xitongjiaocheng/">系统教程</a>
</li><li>
<a target="_top" href="/ruanjianxiazai/">软件下载</a>
</li> </ul>
<ul class="versions">
<li>
<a href="https://m.gxlcms.com" class="active">触屏版</a>
</li>
<li>
<a href="https://www.gxlcms.com" target="_top">电脑版</a>
</li>
</ul>
<p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
</footer>
</body>
</html>
document.title //设置文档标题等价于HTML的