Document的常用属性

2301_80263923

于 2024-01-01 23:36:05 发布

阅读量466

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/2301_80263923/article/details/135330671

版权

文档对象概述

在前端开发中，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 的引用。	只读

代码演示：

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
  <script>
	document.body.onload = addElement;

	function addElement () {
	  // 创建一个新的 div 元素
	  let newDiv = document.createElement("div");
	  // 给它一些内容
	  let newContent = document.createTextNode("Hi JavaScript");
	  // 添加文本节点 到这个新的 div 元素
	  newDiv.appendChild(newContent);
	
	  // 将这个新的元素和它的文本添加到 DOM 中
	  let currentDiv = document.getElementById("div1");
	  document.body.insertBefore(newDiv, currentDiv);
	}
  </script>
</body>
</html>

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

2301_80263923

关注

10
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Document的常用属性

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
复制链接

扫一扫