Document的常用属性

Bi8bo

已于 2024-01-02 11:44:25 修改

阅读量1.2k

点赞数 14

文章标签：前端

于 2024-01-01 23:37:03 首次发布

本文链接：https://blog.csdn.net/2302_77874940/article/details/135330727

版权

本文详细介绍了DOM的Document对象在前端开发中的重要性，包括其属性（如document.title,document.body等）、方法（getElementById,getElementsByTagName等）以及如何利用它动态操纵网页内容，是理解网页交互基础的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM概述

在前端开发中，DOM（文档对象模型）扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互，实现动态的网页效果。DOM的核心部分之一就是Document对象，它代表了整个HTML文档。在本篇博客中，我们将深入探讨Document对象，包括它的属性、方法以及如何使用它来操纵网页内容。

什么是Document对象

Document对象是DOM的根节点，代表整个HTML文档。通过Document对象，您可以访问和操纵HTML文档的各个部分，包括元素、属性、文本内容等。以下是一些Document对象的常见属性和方法：

document.getElementById(id): 通过元素的id属性获取元素。
document.getElementsByTagName(tagName): 通过标签名获取元素的集合。
document.createElement(tagName): 创建一个新的HTML元素。
document.querySelector(selector): 通过CSS选择器获取元素。
document.write(text): 将文本写入文档。
document.body: 获取文档的<body>元素。
document.title: 获取或设置文档的标题。

document对象层次结构如图所示：

Document常用属性

属性	描述	类型
Document.activeElement	返回一个目前处于聚焦状态的 Element(元素对象)。	只读
Document.body	返回当前文档的 <body> 或 <frameset> 节点。
Document.characterSet	返回文档正在使用的字符集。	只读
Document.children	返回当前文档的子元素。	只读
Document.documentElement	返回当前文档的直接子节点。对于 HTML 文档，HTMLHtmlElement 对象一般代表该文档的<html> 元素。	只读
Document.documentURI	以字符串的类型，返回当前文档的路径。	只读
Document.firstElementChild	返回当前文档的第一个子元素。	只读
Document.hidden	返回一个布尔值，表明当前页面是否隐藏。	只读
Document.lastElementChild	返回当前文档的最后一个子元素。	只读
Document.pictureInPictureEnabled	若画中画特性可用，则返回 true。	只读
Document.scrollingElement	返回对滚动文档的 Element 的引用。	只读

代码演示：

document 常用属性:

1. document.title：获取或设置页面标题。

<script>
  // 获取或设置文档的标题
  document.title = "新的标题";
  console.log(document.title); // 输出： "新的标题"
</script>

效果：
在这里插入图片描述

2. document.URL：获取当前页面的完整 URL。

<script>
  alert(document.URL); // 弹窗显示当前页面的完整 URL
</script>

效果：

在这里插入图片描述

document.domain：获取当前页面的域名。

<script>
	console.log(document.domain); // 输出当前页面的域名
</script>

效果：
在这里插入图片描述

document.body：获取页面的 body 元素。

<script>
	console.log(document.body); // 输出页面的 body 元素
</script>

效果图：
在这里插入图片描述

document.head：获取页面的 head 元素。

<script>
	console.log(document.head); // 输出页面的 head 元素
</script>

效果：
在这里插入图片描述

document.documentElement：获取页面的根元素（html 元素）。

<script>
	console.log(document.documentElement); // 输出页面的根元素
</script>

效果：
在这里插入图片描述

document.forms：获取页面中的所有表单元素。


<form action="#" method="get">
  <p>
    <input type="text" value="文本">
  </p>
    <p>
      input: <input type="password">
    </p>
</form>

<script>
  var forms = document.forms;
  console.log(forms.length); // 输出页面中表单元素的数量
  console.log(forms[0]); // 输出第一个表单元素
</script>

效果：
在这里插入图片描述

document.links：获取页面中所有的链接元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<a href="#">链接1</a>
<a href="#">链接2</a>
<script>
  var links = document.links;
  console.log(links.length); // 输出页面中链接元素的数量
  console.log(links[0]); // 输出第一个链接元素
</script>
</body>
</html>

效果：
在这里插入图片描述

document.images：获取页面中所有的图片元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<img src="上课内容/rose(2).jpg" height="150" width="250"/>
<img src="上课内容/rose.jpg" height="280" width="250"/>
<script>
  var images = document.images;
  console.log(images.length); // 输出页面中图片元素的数量
  console.log(images[0]); // 输出第一个图片元素
</script>
</body>
</html>

效果：
在这里插入图片描述

document.scripts：获取页面中所有的脚本元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script></script>  <!--  脚本1-->
  <script></script>  <!--  脚本2-->
</head>
<body>
<script>
  var scripts = document.scripts;
  console.log(scripts.length); // 输出页面中脚本元素的数量
  console.log(scripts[0]); // 输出第一个脚本元素
</script> <!--脚本3-->                                                                                                          
</body>
</html>

效果：
在这里插入图片描述

document 常用方法:

document.getElementById()：通过Id来获取相对应的数据
document.getElementByName();通过name来获取相对应的数据
document.getElementByTagName();通过标签名来返回标签里所有的数据

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="div1">文本1</div>
<div name="div2">文本2</div>
<p>文本3</p>
<script>
  var div1 = document.getElementById("div1");
  console.log(div1.innerText)  //输出 id为div1 里的文本内容

  var div2 = document.getElementsByName("div2");
  console.log(div2[0].innerText)  //输出 name为div2 里的文本内容
  
  var p=document.getElementsByTagName("p");
  console.log(p[0].innerText)  //输出标签为p 里的文本内容
</script>
</body>
</html>

效果图：

在这里插入图片描述

总结
Document对象是DOM的核心，代表整个HTML文档。通过Document对象，您可以获取元素、创建新元素、写入文本、处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动，实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件，还是创建新的元素，Document对象都是前端开发不可或缺的工具之一。