JavaScript 文档对象

最新推荐文章于 2024-09-20 10:29:51 发布

lesileqin

最新推荐文章于 2024-09-20 10:29:51 发布

阅读量1.4k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lesileqin/article/details/103863165

版权

JavaScript 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

文章目录

一、文档对象概述
二、文档对象的应用

一、文档对象概述

（一）什么是文档对象？

文档即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`	同上，不同的是他以换行符结尾
`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 = document.createElement(sName);

其中sElement用来接收该方法返回的一个对象，sName用来设置HTML标记的类型和基本属性

例子：动态添加文本框

写一个函数，利用上面的语法添加一个标记，并且设置他的类型以及各种属性最后把文本框作为子节点追加到表单中，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态添加文本框</title>
    <script type="text/javascript">
        function addInput() {
            var txt=document.createElement("input");
            txt.type="text";
            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方法，语法如下：

sElement=document.getElementById(id);

实例：

<script type="text/javascript">
function chg(){
	var t = document.getElementById("txt");
	t.value="修改后";
}
</script>
<input type="text" id="txt" value="初始文本"/>
<input type="button" value="更改" name="btn" onclick="chg()"/>