JS中document对象详解
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.charset //设置字符集简体中⽂:gb2312
---------------------------------------------------------------------
对象⽅法
document.write() //动态向页⾯写⼊内容
document.body.appendChild(oTag)
-
--------------------------------------------------------------------
body-主体⼦对象
document.body                  //指定⽂档主体的开始和结束等价于<body></body>
document.body.bgColor          //设置或获取对象后⾯的背景颜⾊
document.body.link              //未点击过的链接颜⾊
document.body.alink            //激活链接(焦点在此链接上)的颜⾊
document.body.vlink            //已点击过的链接颜⾊
              //⽂本⾊
document.body.innerText        //设置<body>...</body>之间的⽂本
document.body.innerHTML        //设置<body>...</body>之间的HTML代码
pMargin        //页⾯上边距
document.body.leftMargin        //页⾯左边距
document.body.rightMargin      //页⾯右边距
document.body.bottomMargin      //页⾯下边距
document.body.background        //背景图⽚
document.body.appendChild(oTag) //动态⽣成⼀个HTML对象
----------------------------
常⽤对象事件:
lick="func()"              //⿏标指针单击对象是触发
useover="func()"          //⿏标指针移到对象时触发
useout="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>
lick = dothis();
js assign</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 = ateElement("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        // ?号后的部分
----------------------------
常⽤对象事件:
load()          //刷新⽹页
load(URL)      //打开新的⽹页
document.location.assign(URL)      //打开新的⽹页
place(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
www.x2y2:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere
document.href，document.location，window.location区别
document.href="www.master"
document.location="www.master"
window.location="www.master"
只是属于包含的问题，⼀个是window,⼀个是document
location 是个对象，⽐如本页的document.location和window.location，它的属性有：
location.hostname    =    community.csdn
location.href    =  community.csdn/Expert/topic/l?temp=2.695864E-02
location.host    =    community.csdn
location.hash    =
location.port    =
location.pathname    =    /Expert/topic/l
location.search    =    ?temp=2.695864E-02
location.protocol    =    http:
href 是location的属性，类别是string。⽤户不能改变document.location(因为这是当前显⽰⽂档的位置)。但是可以改变window.location (⽤其它⽂档取代当前⽂档) . document.location是只读的。window.location是可读可写的。
======================================================================
selection-选区⼦对象
document.selection 表⽰当前⽹页中的选中内容。
⽅法有：
　清除选中的内容
　取消选中
　返回 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=ateTextRange();
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=ateTextRange();
)
}
function test1()
{
var rng=ateTextRange();
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 ElementById("inp1")
var r = ateRange();
ateTextRange().inRange(r))
);
}
</script>
3. 页⾯⽂本倒序查
abababababababa
<input value="倒序查a" onclick=myfindtext("a") type="button">
<script language ='javascript'>
var rng = ateTextRange();
function myfindtext(text)
{
if(rng.findText(text,-1,1))
{
rng.select();
}else
{alert("end");}
}
</script>
<div>请选中这⾥的部分⽂字。</div>
<div><input type="button" value="请选中部分⽂字，然后点击这⾥执⾏ empty" onclick="javascript:Foo();" /></div> <script type="text/javascript" language="javascript">
<!--
function Foo()
{
pty();
}
-->
</script>
<div>请选中这⾥的部分⽂字。</div>
<div><input type="button" value="加粗" onclick="javascript:Bold();" /></div>
<script type="text/javascript" language="javascript">
<!--
function Bold()
{
var r = ateRange();
}
-->
</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>标签与之对应就可以显⽰

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。