JS中document对象详解-阿里云开发者社区

开发者社区> 宁静_夏天> 正文

JS中document对象详解

简介: 转自:http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html   对象属性 document.title //设置文档标题等价于HTML的标签 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>


<script>
document.body.onclick = dothis();
</script>
</body>

<SCRIPT LANGUAGE="JavaScript">

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:查询

可选,用于给动态网页(如使用CGIISAPIPHP/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.hrefdocument.locationwindow.location区别

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

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

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

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

location 是个对象,比如本页的document.locationwindow.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. 返回createTextRangetexthtmlText

<script language="javascript">
function test()
{

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>

<div><input type="button" value="请选中部分文字,然后点击这里执行 empty" onclick="javascript:Foo();" /></div>

<script type="text/javascript" language="javascript">

<!--

function Foo()

{

    document.selection.empty();

}

-->

</script>

 

 

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

  <div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>  

<script type="text/javascript" language="javascript">  

<!--   

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

<input name="myctrl">

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

-----------------------------------------------------------------------
<html>
<!--Text
控件相关Script-->
<form name="Myform">

<input type="text" name="oText">

<input type="password" name="oPswd">
<form>
<script language="javascript">
//
获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--Select
控件相关Script-->
<form name="Myform">
<select name="oSelect">

<option value="语文">1</option>

<option value="数学">2</option>

<option value="英语">3</option>
</select>
</form>

<script language="javascript">
//
遍历select控件的option
var length
length=document.Myform.oSelect.length
for(i=0;i<length;i++)
document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
//
遍历option项并且判断某个option是否被选中
for(i=0;i<document.Myform.oSelect.length;i++){

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>

<script language="javascript">
//
根据SelectedIndex打印出选中的option
//(0
document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect[i].value)
</script>

<script language="javascript">
//
动态增加select控件的option
var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";

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 对象有属性。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4075 0
Javascript学习8 - 脚本化文档(Document对象)
原文:Javascript学习8 - 脚本化文档(Document对象)    每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Document对象。
734 0
DOM---文档对象模型(Document Object Model)的基本使用
一、DOM简介    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。
898 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4513 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9439 0
JS中document对象详解
转自:http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html   对象属性 document.title //设置文档标题等价于HTML的标签 document.
707 0
dom document object model 文档对象模型
1、事件     body 事件         onload onunload onbeforeunload     常见事件         onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(点击按键)、onkeyu...
902 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3274 0
+关注
宁静_夏天
喜欢编程,java,php,js,golang等,目前主要是golang后端方向.
289
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载