JS中document对象详解

转自：http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html

对象属性
document.title //设置文档标题等价于HTML的<title>标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集简体中文:gb2312
---------------------------------------------------------------------

对象方法
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()"           //鼠标指针移出对象时触发

document.body.innerHTML='＜br/＞＜br/＞＜br/＞This is not at the bottom!＜br/＞"+document.body.innerHTML;

<body>
test
<script>
function dothis() {
alert('done!');
}
</script>

for(a in document.body){
document.write(a);
document.write("----");
document.write(document.body[a]);
document.write("<br>");
}
</SCRIPT>

var br = document.createElement("br");
document.body.appendChild(br); ======================================================================
location:

document.location.hash          // #号后的部分 VS   window.location.hash
document.location.host          // 域名+端口号
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)      //打开新的网页

URL即:统一资源定位符 (Uniform Resource Locator, URL)

完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment

scheme:通信协议

常用的http,ftp,maito等

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径

由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询

可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。

fragment:信息片断

字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL

http://www.x2y2.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere

document.href，document.location，window.location区别

document.href="http://www.master.net"

document.location="http://www.master.net"

window.location="http://www.master.net"

只是属于包含的问题，一个是window,一个是document

location 是个对象，比如本页的document.location和window.location，它的属性有：

location.hostname = community.csdn.net

location.href = http://community.csdn.net/Expert/topic/4033/4033372.xml?temp=2.695864E-02

location.host = community.csdn.net

location.hash =

location.port =

location.pathname = /Expert/topic/4033/4033372.xml

location.search = ?temp=2.695864E-02

location.protocol = http:

href 是location的属性，类别是string。用户不能改变document.location(因为这是当前显示文档的位置)。但是可以改变window.location (用其它文档取代当前文档) . document.location是只读的。window.location是可读可写的。

======================================================================
selection-选区子对象
document.selection 表示当前网页中的选中内容。

方法有：

clear　清除选中的内容

empty　取消选中

createRange　返回 TextRange 或 ControlRange 对象

createTextRange 返回被建立的 TextRange 对象

使用：oTextRange = object . createTextRange ()
返回对象(Element)。如果成功的话返回被建立的 TextRange 对象。

说明：
为 object 建立 TextRange 对象。
使用此 TextRange 对象可以检索和修改 object 内的文本。 TextRange 对象的 htmlText 特性尤其提供了方便。

TextRange的常用属性与方法：

属性
boundingHeight 获取绑定TextRange对象的矩形的高度
boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的距离
offsetLeft 获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置
offsetTop 获取对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置
htmlText
text 设置或获取范围内包含的文本
方法
moveStart 更改范围的开始位置
moveEnd 更改范围的结束位置
collapse 将插入点移动到当前范围的开始或结尾
move 折叠给定文本范围并将空范围移动给定单元数
execCommand 在当前文档、当前选中区或给定范围上执行命令
select 将当前选择区置为当前对象
findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。

使用TextRange对象通常包括三个基本的步骤:

1.创建文本范围
2.设置开始点和结束点
3.对范围进行操作

function rdl_doTextRange()

{
var oMessage=document.all("oMessage");
var oTextRange=document.body.createTextRange();
if (oTextRange!=null) alert(oTextRange.htmlText);

}

<span id=oMessage>我是一些文字。</span>
<br><br>
<input type=button value=" 建立选择区" onclick="rdl_doTextRange();">

createTextRange用法：

1. 返回createTextRange的text和htmlText

var rng=document.body.createTextRange();

alert(rng.text)
}
function test1()
{

var rng=document.body.createTextRange();

alert(rng.htmlText)
}
</script>
2.获取指定文本框中的选中的文字：只响应第一个文本框

<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" onclick="test()" value="确定">
<script language="javascript">
function test()
{

var o=document.getElementById("inp1")

var r = document.selection.createRange();

if(o.createTextRange().inRange(r))

alert(r.text);
}
</script>

3. 页面文本倒序查找

abababababababa

<input value="倒序查找a" onclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = document.body.createTextRange();
function myfindtext(text)
{

rng.collapse(false);

if(rng.findText(text,-1,1))
{

rng.select();

rng.collapse(true);
}else
{alert("end");}

}
</script>

<div>请选中这里的部分文字。</div>

<!--

function Foo()

{

document.selection.empty();

}

-->

</script>

<div>请选中这里的部分文字。</div>

<!--

function Bold()

{

var r = document.selection.createRange();

r.execCommand("Bold");

}

-->

</script>

======================================================================

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>标签与之对应就可以显示

<html>
<img name=oImage>
<script language="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="/1.jpg"
</script>
</html>

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

forms集合(页面中的表单)

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

b)通过标签name属性直接引用
<form name="Myform">

</form>
document.Myform.myctrl //document.表单名.控件名

-----------------------------------------------------------------------
<html>

<form name="Myform">

<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>

<form name="Myform">
<select name="oSelect">

if(document.Myform.oSelect[i].selected!=true)

document.write(document.Myform.oSelect[i].value)

else

document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")
}
</script>

document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv //引用图层oDiv
document.all.oDiv.style
document.all.oDiv.style.display="" //图层设置为可视
document.all.oDiv.style.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
----------------------------
示例代码：
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>

<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>

document.anchors[] VS document.links[]
document.anchors 是一个数组，包含了文档中所有锚标记（包含 name 属性的<a>标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。
document.links 也是一个数组，包含了文档中所有连接标记（包含 href 属性的<a>标记和<map>标记段里的<area>标记），按照在文档中的次序，从 0 开始给每个连接标记定义了一个下标。
如果一个<a>标记既有 name 属性，又有 href 属性，则它既是一个 Anchor 对象，又是一个 Link 对象。
在 IE 中，如果在<a>标记中添加“id="..."”属性，则这个<a>对象被赋予一个标识（ID），调用这个对象的时候只需要使用“<id>”就行了。很多文档部件都可以用这个方法来赋予 ID，但要注意不能有两个 ID 相同。

anchors 和 links 作为数组，有数组的属性和方法。单个 Anchor 对象没有属性；单个 Link 对象有属性。

JS中document对象详解的更多相关文章

转-JS中document对象详解
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor //设置页面背景色 document.fgColor //设置 ...
JS中navigator对象详解
<code class="language-html"><!doctype html> <html> <head> <meta ...
js中Date()对象详解
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???? ...
js中window对象详解以及页面跳转
1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp&quo ...
(转)javascript中event对象详解
原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解博客分类: javaScript JavaScriptCS ...
django中request对象详解(转载)
django中的request对象详解 Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将 HttpRequest对象作为第一个参数传入该函数. ...
HTML中 DOM操作的Document 对象详解(收藏)
Document 对象Document 对象代表整个HTML 文档,可用来访问页面中的所有元素.Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访 ...
JS中this关键字详解
本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习首先,必须搞清楚在JS里面,函数 ...
原生JS：String对象详解
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

随机推荐

JAVA多线程和并发基础面试问答【转】
JAVA多线程和并发基础面试问答多线程和并发问题是Java技术面试中面试官比较喜欢问的问题之一.在这里,从面试的角度列出了大部分重要的问题,但是你仍然应该牢固的掌握Java多线程基础知识来对应日后碰 ...
linux shell 命令获取字符串/文件的MD5值
获取字符串的MD5值: 字符串“hello”的MD5: $ echo -n 'hello'|md5sum|cut -d ' ' -f1 得到的MD5值: 5d41402abc4b2a76b9719d9 ...
ubuntu的交换分区和系统休眠
因为休眠功能在部分计算机上不能正常工作,所以自16.04后,ubuntu不在默认开启休眠功能. 要开启休眠功能需要如下条件. 1.要有交换分区(swap). 2.交换分区的容量至少要和实际内存一样大, ...
使用cat命令添加或附加多行文本
覆盖原有文本: cat>test<<EOF the 1 line the 2 line the 3 line EOF 追加的原有文本尾部: cat>>test<&l ...
怎么查看eclipse是否支持maven
打开eclipse,选择Windows->Preferences 查看Preferences下是否有Maven即可
每日英语：Skull Shakes Up Human Family Tree
A newly discovered 1.8 million-year-old skull offers evidence that humanity's early ancestors emerge ...
PHP5.4新特性之上传进度支持Upload progress
在PHP5.4版本当中给我们提供了好用的特性,上传进度的支持,我们可以配合Ajax动态获取SESSION当中的上传进度: 在使用这一特性之前,需要现在php.ini文件当中进行相应的设置: 1 2 ...
Oracle PLSQL Demo - 02.SELECT INTO单行赋值[SELECT INTO variables]
declare v_sal number; begin ; dbms_output.put_line(v_sal); end;
Ng-cloak解决angularJs中的闪烁问题
引言上一篇博客写到了使用ng-bind指令解决页面显示{{express}}问题,这次我们来使用另一种方法解决一下. 在使用AngularJS开发评教移动端的时候,我们经常会看见在Chrome这类快 ...
VC++ 获取本地IP和计算机名
主要是两个函数的使用,gethostname();.gethostbyname(); 自定义两个函数GetLocalHostName获取计算机名.GetIPAddress获取IP地址 int CIPD ...

JS中document对象详解

JS中document对象详解的更多相关文章

随机推荐

热门专题