JS的Document属性和方法小结


Posted in Javascript onSeptember 17, 2013

document.title //设置文档标题等价于HTML的title标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期,只读属性
document.fileModifiedDate //文件修改日期,只读属性
document.charset //设置字符集 简体中文:gb2312
document.fileSize //文件大小,只读属性
document.cookie //设置和读出cookie

———————————————————————
常用对象方法

document.write() //动态向页面写入内容
document.createElement(Tag) //创建一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
———————————————————————

body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置body>…/body>之间的文本
document.body.innerHTML //设置body>…/body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.appendChild(oTag) //动态生成一个HTML对象

常用对象事件

document.body.onclick=”func()” //鼠标指针单击对象是触发
document.body.onmouseover=”func()” //鼠标指针移到对象时触发
document.body.onmouseout=”func()” //鼠标指针移出对象时触发
———————————————————————
location-位置子对象

document.location.hash // #号后的部分
document.location.host // 域名+端口号//好像返回的是主机名localhost,没有返回端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
———————————————————————
selection-选区子对象
document.selection

例如:

<div>请选中这里的部分文字。</div> 
<div><input type="button" value="请选中部分文字,然后点击这里执行 empty" onclick="javascript:Foo();" /></div> 
<script type="text/javascript" language="javascript"> 
<!-- 
function Foo() 
{ 
document.selection.empty(); 
} 
--> 
</script>

selection的createRange方法

document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。

配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。

这些好像都是只有在IE下才能实现。。

———————————————————————

images集合(页面中的图象)

a)通过集合引用
document.images //对应页面上的img标签
document.images.length //对应页面上img标签的个数
document.images[0] //第1个img标签
document.images[i] //第i-1个img标签

b)通过name属性直接引用
img name=”oImage”
document.images.oImage //document.images.name属性

c)引用图片的src属性
document.images.oImage.src //document.images.name属性.src

d)创建一个图象
var oImage
oImage = new Image()
document.images.oImage.src=”1.jpg”
同时在页面上建立一个img /标签与之对应就可以显示

———————————————————————-

forms集合(页面中的表单)

a)通过集合引用
document.forms //对应页面上的form标签
document.forms.length //对应页面上/formform标签的个数
document.forms[0] //第1个/formform标签
document.forms[i] //第i-1个/formform标签
document.forms[i].length //第i-1个/formform中的控件数
document.forms[i].elements[j] //第i-1个/formform中第j-1个控件

b)通过标签name属性直接引用
/formform name=”Myform”>input name=”myctrl”/>/form
document.Myform.myctrl //document.表单名.控件名

c)访问表单的属性
document.forms[i].name //对应form name>属性
document.forms[i].action //对应/formform action>属性
document.forms[i].encoding //对应/formform enctype>属性
document.forms[i].target //对应/formform target>属性

document.forms[i].appendChild(oTag) //动态插入一个控件
document.all.oDiv //引用图层oDiv
document.all.oDiv.style.display=”" //图层设置为可视
document.all.oDiv.style.display=”none” //图层设置为隐藏
document.getElementId(”oDiv”) //通过getElementId引用对象
document.getElementId(”oDiv”).style=”"
document.getElementId(”oDiv”).display=”none”
/*document.all表示document中所有对象的集合
只有ie支持此属性,因此也用来判断浏览器的种类*/

图层对象的4个属性
document.getElementById(”ID”).innerText //动态输出文本
document.getElementById(”ID”).innerHTML //动态输出HTML
document.getElementById(”ID”).outerText //同innerText
document.getElementById(”ID”).outerHTML //同innerHTML

------------------------------------------------------------------------------------------------------------------------------------------------------------------
document.readyState:判断文档是否加载完成。firefox不支持。

这个属性是只读的,传回值有以下的可能:

0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。
1-LOADING:加载程序进行中,但文件尚未开始解析。
2-LOADED:部分的文件已经加载且进行解析,但对象模型尚未生效。
3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
4-COMPLETED:文件已完全加载,代表加载成功。

document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. 
function subSomething() 
{ 
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入 
//你要做的操作。 
} 
else if(document.readyState=="loading"){ 
} 
}

比较好的例子:https://3water.com/article/20445.htm

说明 :onreadystatechange 事件能辨识readyState 属性的改变。

document.all(只被IE支持)

action:document.layers是Netscape 4.x专有的属性,是一个代表所有由储如<div><layer>等定位了的元素的数组通常也是用<div> 或<layer>对象的id属性来引用的,但是这里面不包含除此以外的其它元素

document.layers和document.all的用法是一样的,功能也是相同的。所在我就只介绍一种用法:
document.all的意思是文档的所有元素,也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的,所以我们可以用 document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句,可以做出许许多多动态网页效果,如:动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。
document.all[]这个数组可以访问文档中所有元素。

例1(这个可以让你理解文档中哪些是对象)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Document.All Example</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
</head> 
<body> 
<h1>Example Heading</h1> 
<hr /> 
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p> 
<p>Yet another <em>paragraph.</em></p> 
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p> 
<hr /> 
<script type="text/javascript"> 
<!-- 
var i,origLength; 
origLength = document.all.length; 
document.write('document.all.length='+origLength+"<br />"); 
for (i = 0; i < origLength; i++) 
{ 
document.write("document.all["+i+"]="+document.all[i].tagName+"<br />"); 
} 
//--> 
</script> 
</body> 
</html>

它的执行结果是:
Example Heading

--------------------------------------------------------------------------------

This is a paragraph. It is only a paragraph.
Yet another paragraph.
This final paragraph has special emphasis.

--------------------------------------------------------------------------------

document.all.length=18
document.all[0]=!
document.all[1]=HTML
document.all[2]=HEAD
document.all[3]=TITLE
document.all[4]=META
document.all[5]=BODY
document.all[6]=H1
document.all[7]=HR
document.all[8]=P
document.all[9]=EM
document.all[10]=EM
document.all[11]=P
document.all[12]=EM
document.all[13]=P
document.all[14]=EM
document.all[15]=EM
document.all[16]=HR
document.all[17]=SCRIPT
(注意它只可以在IE上运行)

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>单击DIV变色</title> 
<style type="text/css"> 
<!-- 
#docid{ 
height:400px; 
width:400px; 
background-color:#999;} 
--> 
</style> 
</head> 
<body><div id="docid" name="docname" onClick="bgcolor()"></div> 
</body> 
</html> 
<script language="javascript" type="text/javascript"> 
<!-- 
function bgcolor(){ 
document.all[7].style.backgroundColor="#000" 
} 
--> 
</script>

上面的这个例子让你了解怎么访问文档中的一个特定元素,比如文档中有一个DIV
<div id="docid" name="docname"></div>,你可以通过这个DIV的ID,NAME 或INDEX属性访问这个DIV:
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("div")则返回文档中所有DIV数组,本例中只有一个DIV,所以用 document.all.tags("div")[0]就可以访问了。

3、使用document.all[]
例3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Document.All Example #2</title> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
</head> 
<body> 
<!-- Works in Internet Explorer and compatible --> 
<h1 id="heading1" align="center" style="font-size: larger;">DHTML Fun!!!</h1> 
<form name="testform" id="testform" action="#" method="get"> 
<br /><br /> 
<input type="button" value="Align Left" 
onclick="document.all['heading1'].align='left';" />//改变<h1& gt;</h1>标签对中的align属性的值,下面的代码作用相同 
<input type="button" value="Align Center" 
onclick="document.all['heading1'].align='center';" /> 
<input type="button" value="Align Right" 
onclick="document.all['heading1'].align='right';" /> 
<br /><br /> 
<input type="button" value="Bigger" 
onclick="document.all['heading1'].style.fontSize='xx-large';" /> 
<input type="button" value="Smaller" 
onclick="document.all['heading1'].style.fontSize='xx-small';" /> 
<br /><br /> 
<input type="button" value="Red" 
onclick="document.all['heading1'].style.color='red';" /> 
<input type="button" value="Blue" 
onclick="document.all['heading1'].style.color='blue';" /> 
<input type="button" value="Black" 
onclick="document.all['heading1'].style.color='black';" /> 
<br /><br /> 
<input type="text" name="userText" id="userText" size="30" /> 
<input type="button" value="Change Text" 
onclick="document.all['heading1'].innerText=document.testform.userText.value;" /& gt;//改变<h1></h1>标签对中的文本内容 
</form> 
</body> 
</html>
Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
JS框架之vue.js(深入三:组件1)
Sep 29 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
JS画5角星方法介绍
Sep 17 #Javascript
js带按钮的提示框可供选择示例代码
Sep 17 #Javascript
今天是星期几的4种JS代码写法
Sep 17 #Javascript
关于javascript event flow 的一个bug详解
Sep 17 #Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 #Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 #Javascript
判断一个变量是数组Array类型的方法
Sep 16 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
提高jQuery性能的十个诀窍
2013/11/14 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python实现结构体代码实例
2020/02/10 Python
Python如何给你的程序做性能测试
2020/07/29 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
校长岗位职责
2013/11/26 职场文书
男方父母证婚词
2014/01/12 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
志愿者活动总结范文
2014/04/26 职场文书
普通党员个人整改措施
2014/10/27 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL