转-JS中document对象详解
对象属性
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:查询
可选，用于给动态网页（如使用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
<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 对象有属性。
转-JS中document对象详解的更多相关文章
- JS中document对象详解
转自:http://www.cnblogs.com/andycai/archive/2010/06/29/1767351.html 对象属性 document.title //设置文档标题等价于HTM ...
- 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 ...
随机推荐
- SSH web.xml文件配置
启动一个WEB项目的时候, WEB容器会去读取它的配置文件web.xml web.xml中配置的加载优先级:context-param -> listener -> filter -> ...
- Gnome创建桌面快捷方式
Ctrl+Alt+T打开终端 输入gnome-desktop-item-edit 桌面/ --create-new (注: 桌面/ 要改为你桌面文件夹所在路径) 配置快捷方式属性,在“命令(A)”这行 ...
- LeetCode 2 Add Two Sum 解题报告
LeetCode 2 Add Two Sum 解题报告 LeetCode第二题 Add Two Sum 首先我们看题目要求: You are given two linked lists repres ...
- sqlite-jdbc jar包下载过程笔记
在网络上找一些开源的jar包和对应的源码时,官网上往往是最为安全,版本最新.但大部分的网站都为英文网站,有时候定位下载地址稍有困难,下面是网上找sqlite-jdbc jar包过程,记录一下,以供参考 ...
- java GUI,贷款服务器
本习题来自<java语言程序设计--进阶篇>第30章,网络编程的习题. 题目描述:为一个客户端编写一个服务器.客户端向服务器发送贷款信息(年利率.贷款年限和贷款总额).服务器计算月偿还额和 ...
- HDU 4998 Rotate --几何
题意:给n个点(x,y,p),从1~n,一次每次所有点绕着第 i 个点(原来的)逆时针转pi个弧度,问最后所有点的位置相当于绕哪个点旋转多少弧度,求出那点X和弧度P 解法:直接模拟旋转,每次计算新的坐 ...
- UVA 103 Stacking Boxes --LIS
实际上是一个扩展维度的矩形嵌套问题. 一个物体能嵌入另一个物体中,当且仅当这个物体的所有维度的长度都小于另外一个(本题是小于等于),又因为可以旋转等变换,所以干脆将每个箱子的边从小到大排序,以便于判断 ...
- 在WPF控件上添加Windows窗口式调整大小行为
起因 项目上需要对Canvas中的控件添加调整大小功能,即能在控件的四个角和四条边上可进行相应的拖动,类似Windows窗口那种.于是在参考以前同事写的代码基础上,完成了该功能. 代码实现 Adorn ...
- Nginx采用https加密访问后出现的问题
线上的一个网站运行了一段时间,应领导要求,将其访问方式更改为https加密方式.更改为https后,网站访问正常,但网站注册功能不能正常使用了! 经过排查,是nginx配置里结合php部分漏洞了一个参 ...
- 06SpringMvc_适配器
适配器的主要功能是去找控制器.Action实现了什么接口 本文案例实现的功能是:在页面上输入中文名字,然后在另外一个网页上显示出来. 案例结构: