JavaScript DOM属性和方法之document文档对象

最新推荐文章于 2024-02-02 10:42:50 发布

知数SEO

最新推荐文章于 2024-02-02 10:42:50 发布

阅读量1.1k

点赞数 25

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135899843

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中document对象的集合（如all、forms、links等）、属性（如body、cookie等）和常用方法（如getElementById、getElementsByTagName等），展示了如何通过这些工具操作HTML文档中的元素和内容。

摘要由CSDN通过智能技术生成

每个载入浏览器的HTML文档都会成为document对象。document对象使我们可以通过js脚本对HTML文档中的所有元素进行访问。document对象也是window对象的一个属性，我们可以通过window.document来使用这个对象。

一、document对象集合

由于document代表了整个HTML文档，所以相比于其他对象来说，document对象提供了几个集合，在某些情况下可以使我们操作变得很简单。

1、all

该集合用于获取所有的标签元素，这个集合获取到的是HTML文档中所有的标签元素，通过document.all的方式来使用，它返回的是一个数组，如果我们想得到某一个标签元素，只需要通过数组的下标取出对应的值就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<a href="https://www.zhishunet.com">知数SEO</a>
<p>专注建站优化8年</p>
<span>您身边的优化专家</span>
</body>
<script>
    var objs = document.all; // 获取HTML文档中所有的标签元素
    console.log(objs); // 打印对象
    var a = document.all[5]; //
    console.log(a);
</script>
</html>

2、forms

该集合用于获取所有form标签元素，forms集合获取到表单中所有的<form>标签元素，使用的方式是document.form返回一个包含HTML文档中所有的<form>标签元素的数组，如果想得到某一个form元素，则采用数组下标的形式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<p>沧海桑田难为水</p>
<form action="">
    <input type="text" name="name" value="1">
</form>
</body>
<script>
    var objs = document.forms;  // 获取HTML文档中所有的form节点对象
    console.log(objs); // 打印对象


    var form = document.forms[0];
    console.log(form);
</script>
</html>

3、links

该集合用于获取文档中所有的链接引用。links集合获取页面中所有的area和link对象的引用，不包括我们在头部通过link标签引入的css以及通过script标签引入的javascript。使用的方法：document.links,返回的是一个对象集合数组。
links集合只能获取到<a>标签的链接和<map>标签中的area的链接

4、images

该集合用于获取文档中所有的img标签元素，images集合可以获取HTML文档中的所有图片对象，使用方法document.images返回的是一个包含所有img标签元素的数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
</body>
<script>
    var objs = document.images;
    console.log(objs);

    var img = document.images[1];
    console.log(img);
</script>
</html>

5、anchors

该集合用于获取文档中所有的锚，用法document.anchors返回一个包含所有锚的数组集合

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<a href="#mao1">知数SEO</a>
<br>
<a name="mao1">1</a>
<a name="mao2">2</a>
<a name="mao3">3</a>
</body>
<script>
    var objs = document.anchors;
    console.log(objs);

    var img = document.anchors[1];
    console.log(img);
</script>
</html>

二、document对象属性

1、body

该属性提供对<body>标签元素的直接访问。不同于其他标签元素要通过id或class等方式获取，DOM提供了document对象的body属性，可以直接访问到<body>标签元素

var body = document.body;
consol.elog(body);

2、cookie

该属性提供对cookie的操作，document.cookie不仅可以获取cookie也可以设置cookie
之前的文章介绍过：JavaScript DOM之Cookie详解

3、domain

该属性返回当前文档的域名,即该属性会返回当前文档的服务器域名。在我们写js的时候如果用到绝对路径的时候会用到这个属性来得到服务器的域名。

// 显示的格式：*www.zhishunet.com*

4、referrer

该属性返回载入当前文档的url，就是当前这个文档是由那个链接跳转过来的，通过这个属性可以得到上一个页面或者来源页面。

5、URL

该属性返回当前文档的URL,本地打开的文件在浏览器运行显示的是本地文件的绝对路径，放在服务器上就会显示文档的可访问URLdocument.URL

// 显示的格式：*https://www.zhishunet.com*

三、document对象方法

1、getElementById()

该方法返回拥有指定id的第一个对象的引用，返回一个具体的elment对象

docuemnt.getElementById('zhishuseo');

2、getElementsByName()

该方法返回带有指定名字的对象集合，这个方法是通过元素的class值来获取标签元素的。因为同一个class可以被不同的标签元素多次使用，所以该方法返回的是一个element对象集合。

3、getElementsByTagName()

该方法返回带有指定标签名的对象集合

4、write() 和 writeIn()

这2个方法都是向文档中写入HTML表达式、文本内容或js代码，不同的是writeln()方法会自动换行

<script>
    document.writeln('<pre>建站优化专家</pre>');
    document.write('建站优化');
</script>

5、open() 和 close()

open()方法打开一个文档流，它有两个参数:

参数1:新文档的类型
参数2:是否继承父文档的历史条目
close()方法关闭一个文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_vx:zhishunet</title>
</head>
<body>
<button onclick="createNewDoc()">打开一个新文档</button>
</body>
<script>
    function createNewDoc(){
        var newDoc = document.open("text/html","replace");
        var content = "<html><body>建站优化专家</body></html>";
        newDoc.write(content);
        newDoc.close();

    }
</script>
</html>

知数SEO

关注

25
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM属性和方法之document文档对象

每个载入浏览器的HTML文档都会成为document对象。document对象使我们可以通过js脚本对HTML文档中的所有元素进行访问。document对象也是window对象的一个属性，我们可以通过来使用这个对象。
复制链接

扫一扫

专栏目录