文档对象Document代表当前的HTML对象，由body标签组成。[@more@]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 /><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 /><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 />常用对象事件: <br /><br />document.body.onclick="func()" //鼠标指针单击对象是触发 <br />document.body.onmouseover="func()" //鼠标指针移到对象时触发 <br />document.body.onmouseout="func()" //鼠标指针移出对象时触发 <br />======================================================================== <br />location-位置子对象: <br /><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 />---------------------------- <br />常用对象事件: <br /><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 />---------------------------- <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)通过name属性直接引用 <br /><img name="oImage"> <br />document.images.oImage //document.images.name属性 <br />---------------------------- <br />c)引用图片的src属性 <br />document.images.oImage.src //document.images.name属性.src <br />---------------------------- <br />d)创建一个图象 <br />var oImage <br />oImage = new Image() <br />document.images.oImage.src="1.jpg" <br />同时在页面上建立一个<img>标签与之对应就可以显示 <br />---------------------------- <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 /><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 />---------------------------- <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 />document.forms[i].appendChild(oTag) //动态插入一个控件 <br />---------------------------- <br />示例代码(form)： <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 />示例代码(checkbox)： <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 />示例代码(Select)： <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 /><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集合(页面中的层): <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 />---------------------------- <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 />---------------------------- <br />示例代码： <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 /><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>
<p style="clear:both;"></p>
<p class="translate">
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/23493047/viewspace-1033139/
，如需转载，请注明出处，否则将追究法律责任。
</p>
<!--
-->
</div>
</div>
<div class="preview-footer clearfix">
<!--已点赞、收藏-->
<div class="icon-praise" id="praise" onclick="blogObj.praise($(this),'/praise/')"><span
class="text"></span><span class="num">0</span></div>
<div class="icon-collect" id="collect" onclick="blogObj.praise($(this),'/favour/')"><span
class="text"></span><span class="num">0</span></div>
<div class="share-group fr">
<div class="bdsharebuttonbox bdshare-button-style0-16" data-bd-bind="1522216707615">
<span class="fl">分享到：</span>
<a href="javascript:;" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="javascript:;" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="javascript:;" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="javascript:;" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>
<script>
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdDesc": "",
"bdMini": "",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "0",
"bdSize": "32"
}, "share": {"bdSize": 16}
};
with (document)
0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = '/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
if ($(window).width() < 1320) {
if ($(window).width() < 1200) {
$(".sideslip").css({
"left": "20px",
"margin-left": 0
})
} else {
$(".sideslip").css({
"margin-left": "-590px"
})
}
}</script>
</div>
</div>
<div class="article-context">
<div class="fl">
<span class="color77">上一篇：</span>
<a href="https://blog.itpub.net/23493047/viewspace-1033138/">Navigator对象</a>
</div>
<div class="fr">
<span class="color77">下一篇：</span>
<a href="https://blog.itpub.net/23493047/viewspace-1033140/">Window对象</a>
</div>
</div>
<input type="hidden" id="blogId" name="blogId" value="1033139">
<!--评论开始-->
<div class="blog-comment">
<div class="new-comment">
<input type="hidden" id="hid" name="hid" value="1033139">
<input type="hidden" name="_token" value="IxSOZtiaIwWUa1lCUVx84SOkgjNYK0XzPDB9rvEd">
<a class="avatar" href="javascript:;">
<img src="/images/user_pic_default.png"></a>
<!--用户未登录-->
<div class="sign-container">
<span>请登录后发表评论</span>
<a class="btn btn-sign">
<a class="layui-btn ml30" onclick="blog.login(event)">登录</a>
</a>
</div>
<!--用户已登录-->
<textarea placeholder="请写下你的评论…" onfocus="blogObj.textareaFocus($(this),200)"
maxlength=200></textarea>
</div>
<div class="comment-list">
<div class="top-title"><span class="all-comment">全部评论</span> <span
class="colorbb ml20"></span>
</div>
<div class="comment-items" id="comment_items">
<script type="text/template" id='blog_template'>
<%for(var i=0;i
<items.length;i++){%>
<div class="comment-item">
<div class="author">
<a target="_blank" href="/<%=items[i].uid%>" class="avatar">
<img src="<%=items[i].headimg%>" alt="">
</a>
<div class="info">
<div class="name"><a target="_blank" href="/<%=items[i].uid%>"><%=items[i].username%></a>
<span class="fr reply-btn"
onclick="blogObj.newComment($(this),'<%=items[i].username%>',<%=items[i].id%>)">回复</span>
</div>
<div class="time colorbb"><%=items[i].createtime%></div>
</div>
</div>
<p class="comment-wrap"><%=items[i].content%></p>
<%if(items[i].items.items.length) { %>
<div class="sub-comment-list">
<%for(var j=0;j
<items
[i].items.items.length;j++){%>
<div class="sub-comment">
<div class="color77 time-reply">
<span class="time"><%=items[i].items.items[j].createtime%></span>
<span class="reply-btn fr"
onclick="blogObj.newComment($(this),'<%=items[i].items.items[j].username%>',<%=items[i].items.items[j].id%>)">回复</span>
</div>
<p><a href="/<%=items[i].uid%>"><%=items[i].items.items[j].username%></a> 回复 <a
href="/<%=items[i].touid%>"><%=items[i].items.items[j].tousername%></a>：
<span class="content"><%=items[i].items.items[j].content%></span></p>
</div>
<%}%>
<%if(items[i].items.total > 5) { %>
<div class="more-comment"><span class="sub-comment-count">还有<i class="count"><%=items[i].items.total-5%></i>条评论</span><span
class="more-comment-btn"
onclick=blogObj.loadSubComment($(this),<%=items[i].id%>) data-count=1 data-flag=true>点击查看</span>
</div>
<%}%>
</div>
<%}%>
</div>
<%}%>
</script>
</div>
</div>
</div>
<!--评论结束-->
</div>
<script>
</script>
<div class="fr w290">
<!--作者信息开始-->
<!--作者信息开始-->
<div class="author-info right-fixed ">
<div class="head-img">
<a href="https://blog.itpub.net/23493047/"><img src="http://account.itpub.net/api/avatar.php?uid=23493047" alt=""></a>
</div>
<div class="author-name"><a href="https://blog.itpub.net/23493047/">dengxinjian</a></div>
<div class="author-intro">
</div>
<ul class="tree-list clearfix">
<li>
<div class="item-tt">博文量</div>
<a href="https://blog.itpub.net/23493047/"><span class="item-num blognum">46</span></a>
</li>
<li>
<div class="item-tt">访问量</div>
<div class="item-num blogviewnum">121018</div>
</li>
</ul>
</div>
<!--作者信息结束-->
<script>
var data = {uid: 23493047};
$._ajax({
url: '/getAuthorInfo/',
data: data,
type: 'get',
dataType: 'json',
success: function (data) {
if (data.code == 200) {
var data = data.data;
$(".blognum").text(data.blognum);
$(".blogviewnum").text(data.visitednum);
}
}
});
</script> <!--作者信息结束-->
<!--博文推荐开始-->
<div class="blog-choice right-fixed">
<h3 class="choice-title">最新文章</h3>
<ul class="newul">
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1061040/"
class="clearfix">
set autotrace on
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1061038/"
class="clearfix">
oracle10g for win7 下载地址
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1060713/"
class="clearfix">
aix查找大文件
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1060614/"
class="clearfix">
hp-rp2405磁阵无法激活
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1054412/"
class="clearfix">
mksysb备份
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1052653/"
class="clearfix">
Oracle中的数据字典技术及常用数据字典总结
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1052652/"
class="clearfix">
Oracle10g 巡检脚本
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1037247/"
class="clearfix">
故障处理
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1034073/"
class="clearfix">
65种茶和植物饮品的不同功效
</a>
</li>
<li class="new-item">
<a href="https://blog.itpub.net/23493047/viewspace-1033722/"
class="clearfix">
世界上超难找的药方
</a>
</li>
<ul>
</div>
<!--大牛精选结束-->
</div>
</div>
<div class="icon-back-top" onclick="$('html,body').animate({scrollTop:0},'slow');"></div>
<!--main部分结束-->
<!--百度推送-->
<script>
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
} else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<!--footer部分开始-->
<div class="blog-footer">
<div class="w1200 pr">
<div class="footer-links">
<a class="icon-blog icon-wx mr30">
<div class="wx-qrcode">
<img src="/images/qrcode.jpg" alt="">
</div>
</a>
<a href="https://weibo.com/itpub2001?from=myfollow_all" class="icon-blog icon-wb" target="_blank"></a>
</div>
<p class="footer-nav">
<a href="http://www.it168.com/bottomfile/it168.shtml" target="_blank">支持我们</a>
<a href="http://www.it168.com/bottomfile/tgzn.shtml" target="_blank">作者招募</a>
<a href="http://www.it168.com/bottomfile/sytk.shtml" target="_blank">用户协议</a>
<a href="//blog.itpub.net/31509949/viewspace-2157750/" target="_blank">FAQ</a>
<a href="http://edu.itpub.net/contactus.html" target="_blank">Contact Us</a>
<script src="https://s22.cnzz.com/z_stat.php?id=1274521965&web_id=1274521965" language="JavaScript"></script>
</p>
<p>北京盛拓优讯信息技术有限公司. 版权所有 <a style="color:#777777;" target="_blank" href="http://beian.miit.gov.cn">京ICP备16024965号-8</a> 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567
<a style="color:#777777;" target="_blank" href="http://www.it168.com/jubao.html"> 未成年人举报专区</a></p>
<p>广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员</p>
<p>违法和不良信息举报电话:18101376593</p>
</div>
</div>
<!--footer部分结束-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?5016281862f595e78ffa42f085ea0f49";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?540bee2c1a1b922df9e0a0b922440b73";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- END STAT PV -->
</body>
</html>