JavaScript⽂档对象
⽂章⽬录
⼀、⽂档对象概述
（⼀）什么是⽂档对象？
⽂档即Document对象代表浏览器窗⼝中的⽂档，这个对象是Window对象的⼦对象，但是它不需要使⽤window来引⽤。这个对象可以访问HTML⽂档中的任何标记，并且可以动态的改变HTML标记中的内容。如下图所⽰，该图包含了Document对象的层次结构:
[外链图⽚转存失败，源站可能有防盗链机制，建议将图⽚保存下来直接上传(img-DhO3Yzf8-1578401071170)
(C:\Users\lesileqin\AppData\Roaming\Typora\typora-user-images\1578313144273.png)]
（⼆）⽂档对象常⽤属性
Document的属性主要⽤于描述HTML⽂档中的超链接、颜⾊、URL以及⽂档中的表单元素和图⽚等。下表列出了Document对象的⼀些常⽤属性：
属性说明
alinkColor链接⽂字被单击时的颜⾊，对应<body>标记中的alink属性
all[]存储HTML标记的⼀个数组（本⾝也是⼀个对象）
bgColor⽂档的背景颜⾊，对应<body>标记中的bgcolor属性
fgColor⽂档的⽂本颜⾊（不包含超链接的⽂字），对应<body>标记中的text属性值
forms[]存储窗体对象的⼀个数组（本⾝也是⼀个对象）
images[]存储图像对象的⼀个数组（本⾝也是⼀个对象）
linkcolor[]未被访问的链接⽂字的颜⾊，对应<body>标记中的link属性
links[]存储link对象的⼀个数组（本⾝也是⼀个对象）
vlinkColor表⽰已访问的链接⽂字的颜⾊，对应 <body>标记中的vlink属性
title当前⽂档的标题对象
body当前的⽂档的主体对象
readyState获取某个对象的当前状态
URL获取或设置URL
（三）⽂档对象的常⽤⽅法
以下是⼀些Documet对象常⽤的⽅法和说明：
⽅法说明
close关闭⽂档的输出流
open打开⼀个⽂档输出流并接收write和writeln⽅法创建页⾯内容
write向⽂档中写⼊HTML或JavaScript语句
writeln同上，不同的是他以换⾏符结尾
writeln 同上，不同的是他以换⾏符结尾createElement
创建⼀个HTML 标记getElementById 获取指定id 的HTML 标记
⽅法
说明⼆、⽂档对象的应⽤
（⼀）链接⽂字颜⾊设置
链接⽂字的颜⾊通过以下属性来设置：alinkColor 属性：⽤来获取或设置当链接被单击时显⽰的颜⾊。语法如下：
[color =]document .alinkcolor [=setColor ]linkColor 属性：⽤来获取或设置页⾯中未被单击是的链接的颜⾊。语法如下：
[color =]document .linkColor [=setColor ]
vlinkColor 属性：⽤来获取或设置页⾯中单机过的链接的颜⾊。语法如下：
[color =]document .vlinkColor [=setColor ]
其中setColor ⽤来设置颜⾊的名称或RGB 值，color是⼀个字符串变量，⽤来获取颜⾊值
例⼦：设置超链接3个状态的⽂字颜⾊
分别设置超链接3个状态的⽂字颜⾊。代码如下：
<span style ="font-size: 36px"><a id ="a" href ="#">JavaScript </a > </span >
<script type ="text/javascript">
document .linkColor ="blue"; //设置未单击时的超链接颜⾊
document .alinkColor ="#000000";
//设置当超链接被单击时显⽰的颜⾊
document .vlinkColor ="#00CCFF"; //设置单击过的超链接的颜⾊
</script >
效果如下：（⼆）⽂档背景⾊和前景⾊设置
⽂档的背景⾊和前景⾊的设置可以使⽤bgColor 属性和fgColor 属性来实现。bgColor 属性：⽤来获取或设置页⾯的背景颜⾊，语法如下：
[color =]document .bgColor [=setColor ]
fgColor 属性：⽤来获取或设置页⾯的前景颜⾊，即页⾯中⽂字的颜⾊，语法如下：
[color =]document .fgColor [=setColor ]
例⼦：动态改变⽂档的前景⾊和背景⾊
设置⼀个颜⾊的数组，然后写⼀个函数来控制变换背景⾊和前景⾊，并且设置每隔1000ms执⾏⼀遍这个函数。这个函数是setTimeout ，代码如下：
背景⾃动变⾊
<script type="text/javascript">
var Arraycolor =new Array("#00FF66","#FFFF99","#99CCFF"
,"#FFCCFF","#FFCC99","#00FFFF");
var n=0;
function changcolors(){
n++;
if(n==(Arraycolor.length-1)) n=0;
document.bgColor=Arraycolor[n];
document.fgColor=Arraycolor[n-1];
//每隔1秒执⾏此程序
setTimeout("changcolors()",1000);
}
changcolors();
</script>
效果如下：
（三）获取并设置URL
获取或设置URL是通过document对象的URL属性来实现的，语法如下：
[url=]document.URL[=setUrl]
（四）在⽂档中输出数据
这个⽤的就多了，⼀个是
document.write(text);
另⼀个是：
document.writeln(text);
（五）动态添加⼀个HTML标记
动态的添加⼀个HTML标记可以使⽤createElement⽅法来实现，它可以根据⼀个指定的类型来创建⼀个标记，语法如下：sElement = ateElement(sName);
其中sElement⽤来接收该⽅法返回的⼀个对象，sName⽤来设置HTML标记的类型和基本属性
例⼦：动态添加⽂本框
写⼀个函数，利⽤上⾯的语法添加⼀个标记，并且设置他的类型以及各种属性最后把⽂本框作为⼦节点追加到表单中，代码如下：
<!DOCTYPE html>
<html lang="en">html document是什么
<head>
<meta charset="UTF-8">
<title>动态添加⽂本框</title>
<script type="text/javascript">
function addInput(){
var ateElement("input");
txt.name="txt";
txt.value="动态添加⽂本框";
//把⽂本框作为⼦节点追加到表单中
document.form1.appendChild(txt);
}
</script>
</head>
<body>
<form name="form1">
<input type="button" name="btn1" value="动态添加⽂本框" onclick="addInput()"/>
</form>
</body>
</html>
效果如下：
（六）获取⽂本框并修改其内容
这个属性⽤的也很多，就是获取⽂本框并修改他的内容，就是——getElementById⽅法，语法如下：ElementById(id);
实例：
<script type="text/javascript">
function chg(){
var t = ElementById("txt");
t.value="修改后";
}
</script>
<input type="text" id="txt" value="初始⽂本"/>
<input type="button" value="更改" name="btn" onclick="chg()"/>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论