JavaScript - Document 对象

上一页
下一页

Window Document 对象

document 对象是一个 JavaScript 对象，它提供对 HTML 文档的所有元素的访问。在 Web 浏览器中加载 HTML 文档时，它会创建一个文档对象。它是 HTML 文档的根。

document 对象包含可用于获取有关 HTML 元素的详细信息并对其进行自定义的各种属性和方法。

JavaScript 文档对象是 window 对象的一个属性。可以使用 window.document 语法访问它。也可以在不为 window 对象添加前缀的情况下访问它。

JavaScript 文档对象属性

JavaScript Document Object 代表整个 HTML 文档，它带有几个属性，允许我们与文档交互和操作文档。一些常见的 Document 对象属性如下：

  • document.title - 获取或设置文档的标题。
  • document.URL − 返回文档的 URL。
  • document.body − 返回文档的 <body> 元素。
  • document.head - 返回文档的 <head> 元素。
  • document.documentElement − 返回文档的 <html> 元素。
  • document.doctype - 返回文档的 Document Type Declaration （DTD）。

这些属性提供了一种使用 JavaScript 访问和修改 HTML 文档不同部分的方法。

示例：访问文档标题

在下面的示例中，我们使用 document.title 属性来访问文档的 odd 属性。


<html>
<head>
	 	<title> JavaScript - DOM Object </title>
</head>
<body>
	 	<div id = "output">The title of the document is: </div>
	 	<script>
	 	 	 document.getElementById("output").innerHTML += document.title;
	 	</script>
</body>
</html>

输出

The title of the document is: JavaScript - DOM Object

示例：访问文档 URL

在下面的示例中，我们使用了文档。URL 属性来访问页面的当前 URL。


<html>
<head>
	 	<title> JavaScript - DOM Object </title>
</head>
<body>
	 	<div id = "output">The URL of the document is: </div>
	 	<script>
	 	 	 document.getElementById("output").innerHTML += document.URL;
	 	 </script>
</body>
</html>

输出

The URL of the document is: https://www.qikepu.com/javascript/javascript_document_object.htm

 

JavaScript 文档对象方法

JavaScript Document Object 为我们提供了各种方法，允许我们与 HTML 文档进行交互和操作。一些常见的 Document 对象方法如下：

  • getElementById（id） - 返回具有指定 ID 的元素。
  • getElementsByClassName（className） − 返回具有指定类名的元素集合。
  • getElementsByTagName（tagName） − 返回具有指定标签名称的元素集合。
  • createElement（tagName） − 创建具有指定标签名称的新 HTML 元素。
  • createTextNode（text） − 使用指定文本创建新的文本节点。
  • appendChild（node） − 将节点追加为节点的最后一个子节点。
  • removeChild（node） − 从 DOM 中删除子节点。
  • setAttribute（name， value） − 设置指定元素上的属性值。
  • getAttribute（name） - 返回元素上指定属性的值。

这些方法使我们能够使用 JavaScript 动态操作 HTML 文档的结构和内容。

示例：使用 HTML 元素的 id 访问 HTML 元素

在下面的示例中，我们使用 document.getElementById（） 方法访问 ID 为“output”的 DIV 元素，然后使用 HTML 元素的 innerHTML 属性显示消息。


<html>
<body>
<div id = "result"> </div>
<script>
	 	// accessing the DIV element.
	 	document.getElementById("result").innerHTML +=	
	 	"Hello User! You have accessed the DIV element using its id.";
</script>
</body>
</html>

输出

Hello User! You have accessed the DIV element using its id.

示例：向文档添加事件

在下面的示例中，我们使用 document.addEventListener（） 方法将 mouseover 事件添加到文档中。


<html>
<body>
	 	<div id = "result">
	 	 	 	<h2> Mouseover Event </h2>
	 	 	 	<p> Hover over here to change background color </p>
	 	 </div>
	 	<script>
	 	 	 document.addEventListener('mouseover', function () {
	 	 	 	 	document.getElementById("result").innerHTML = "Mouseover event occurred.";
	 	 	 });
	 	</script>
</body>
</html>

文档对象属性列表

在这里，我们列出了 document 对象的所有属性。

属性 描述
document.activeElement 获取 HTML 文档中当前聚焦的元素。
adoptedStyleSheets 将新构建的样式表的数组设置为文档。
baseURI 获取文档的绝对基 URI。
body 设置或获取文档的 <body> 标签。
characterSet 获取文档的字符编码。
childElementCount 获取文档的子元素数的计数。
children 获取文档的所有子项。
compatMode 获取一个布尔值，该值表示文档是否以标准模式呈现。
contentType 返回文档的 MIME 类型。
cookie 获取与文档相关的 Cookie。
currentScript 返回当前正在执行其代码的文档的脚本。
defaultView 获取与文档关联的 window 对象。
designMode 更改文档的可编辑性。
dir 获取文档文本的方向。
doctype 获取文档类型声明。
documentElement 获取 <html> 元素。
documentURI 设置或获取文档的位置。
embeds 获取文档的所有嵌入 （<embed>） 元素。
firstElementChild 获取文档的第一个子元素。
forms 返回文档的 <form> 元素数组。
fullScreenElement 获取全屏显示的元素。
fullScreenEnabled 返回布尔值，指示是否在文档中启用了全屏。
head 返回文档的 <head> 标签。
hidden 返回一个布尔值，表示是否将文档视为隐藏文档。
images 返回 <img> 元素的集合。
lastElementChild 返回文档的最后一个子元素。
lastModified 获取文档的上次修改日期和时间。
links 获取所有 <a> 和 <area> 元素的集合。
location 获取文档的位置。
readyState 获取文档的当前状态。
referrer 获取已打开当前文档的文档的 URL。
scripts 获取文档中所有 <script> 元素的集合。
scrollingElement 获取对滚动文档的元素的引用。
styleSheets 返回 CSS Style Sheet 对象的样式表列表。
timeLine 表示文档的默认时间线。
title 设置或获取文档的标题。
URL 获取 HTML 文档的完整 URL。
visibilityState 返回布尔值，表示文档的可见性状态。

Document 对象方法列表

以下是所有 JavaScript 文档对象方法的列表 -

方法 描述
addEventListener() 用于向文档添加事件侦听器。
adoptNode() 用于从其他文档中采用节点。
append() 将新节点或 HTML 附加到文档的最后一个子节点之后。
caretPositionFromPoint() 返回 caretPosition 对象，其中包含基于作为参数传递的坐标的 DOM 节点。
close() 将关闭使用 document.open（） 方法打开的输出流。
createAttribute() 将创建一个新的属性节点。
createAttributeNS() 创建一个具有特定命名空间 URI 的新属性节点。
createComment() 创建一个包含特定文本消息的新注释节点。
createDocumentFragment() 创建一个 DocumentFragment 节点。
createElement() 创建一个新的元素节点以插入到网页中。
createElementNS() 创建具有特定命名空间 URI 的新元素节点。
createEvent() 创建一个新的事件节点。
createTextNode() 创建一个新的文本节点。
elementFromPoint() 从指定的坐标访问元素。
elementsFromPoint() 返回位于指定坐标处的元素数组。
getAnimations() 返回应用于文档的所有动画的数组。
getElementById() 使用 id 访问 HTML 元素。
getElementsByClassName() 使用类名访问 HTML 元素。
getElementsByName() 使用名称访问 HTML 元素。
getElementsByTagName() 使用标签名称访问 HTML 元素。
hasFocus() 根据任何元素或文档本身是否在焦点中返回布尔值。
importNode() 用于从另一个文档导入节点。
normalize() 将删除空的文本节点，并连接其他节点。
open() 用于打开新的输出流。
prepand() 用于在所有节点之前插入特定节点。
querySelector() 用于选择与作为参数传递的 css 选择器匹配的第一个元素。
querySelectorAll() 返回 HTML 元素的 nodelist，该 nodelist 与多个 CSS 选择器匹配。
removeEventListener() 用于从文档中删除事件侦听器。
replaceChildren() 替换文档的子节点。
write() 用于将文本、HTML 等写入文档。
writeln() 类似于 write（） 方法，但将每个语句写入新行。
打印本页
上一页
下一页