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 ...

随机推荐

SpringMVC中异常处理详解
Spring MVC处理异常最基本的就是HandlerExceptionResolver这个接口,先看张图分析上图可以轻松总结出,spring mvc里有三种异常处理方法: 1.使用官方提供的简单异 ...
AI、机器学习、深度学习、神经网络
1.AI:人工智能(Artificial Intelligence) 2.机器学习:(Machine Learning, ML) 3.深度学习:Deep Learning 人工功能的实现是让机器自己学 ...
[na]那些OVER的封装(pppoe/ppp/ipsec)
什么over什么,如pppoe, ppp的封装都在over对象之后,入下图: PPPOE Ipsec
Oracle“不等于号”与Null的情况
今天突然才发现,Oracle中的“不等于操作符”是忽略Null的. 比如,查询comm不等于的300的记录,我会理所当然地使用where comm != 300 预想会返回包含Null的不等于300的 ...
三、为什么String在Java中是不可更改的
String在Java中是个不可更改的类.一个不可更改的类简单来说就是这个类的所有实例是不可以更改的.所有的实例信息在创建的时候被初始化而且信息是不可以更改的.不可更改的类有很多好处.这篇文章总结了为 ...
JAVA中的protected（详解），以及和clone（）方法有关的一些问题
http://blog.csdn.net/ciawow/article/details/8262609 ************************************************ ...
svn 版本导致
Malformed network data svn: Unable to parse URL '/svn/PROJECT/13.深大出版社/trunk/sdcbs/' svn 版本导致 1 ...
How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口）【精】
原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...
【WordPress】外网访问WordPress时无法加载样式表CSS
情况: 阿里云ECS服务器,用WampServer搭建的WordPress站点,服务端自身访问该站点时显示正常,但外网访问时不能加载样式表CSS的问题. 重要的参考: https://www.doub ...
JavaScript 闭包原理分析
本文转载至 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 另一篇很好的资料 http://www.k ...

JS中document对象详解

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

随机推荐

热门专题