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 相关文章推荐
jQuery使用手册之 事件处理
Mar 24 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php实现微信发红包功能
2018/07/13 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python3爬取数据至mysql的方法
2018/06/26 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
教学个人的自我评价分享
2014/02/16 职场文书
双拥工作宣传标语
2014/06/26 职场文书
小学教师读书活动总结
2014/07/08 职场文书
商铺门前三包责任书
2014/07/25 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
高考升学宴答谢词
2015/01/20 职场文书
小石潭记导游词
2015/02/03 职场文书
教师个人年终总结
2015/02/11 职场文书
字节飞书面试promise.all实现示例
2022/06/16 Javascript