javascript基础学习系列二百一十二：Document类型

Sunny_媛

于 2024-03-02 17:57:07 发布

阅读量640

点赞数 23

文章标签： javascript 学习开发语言性能优化系统架构架构软件工程

本文链接：https://blog.csdn.net/m0_68635815/article/details/136419768

版权

Document 类型是 JavaScript 中表示文档节点的类型。在浏览器中，文档对象 document 是 HTMLDocument 的实例(HTMLDocument 继承 Document)，表示整个 HTML 页面。document 是 window 对象的属性，因此是一个全局对象。Document 类型的节点有以下特征:
 nodeType 等于 9;
 nodeName 值为"#document";
 nodeValue 值为 null;
 parentNode 值为 null;
 ownerDocument 值为 null;
 子节点可以是 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction
或 Comment 类型。
Document 类型可以表示 HTML 页面或其他 XML 文档，但最常用的还是通过 HTMLDocument 的实
例取得 document 对象。document 对象可用于获取关于页面的信息以及操纵其外观和底层结构。

1.文档子节点

虽然 DOM 规范规定 Document 节点的子节点可以是 DocumentType、Element、Processing- Instruction 或 Comment，但也提供了两个访问子节点的快捷方式。第一个是 documentElement 属性，始终指向 HTML 页面中的元素。虽然 document.childNodes 中始终有元素，但 8 使用 documentElement 属性可以更快更直接地访问该元素。假如有以下简单的页面:

<html>
  <body>
  </body>
</html>

浏览器解析完这个页面之后，文档只有一个子节点，即元素。这个元素既可以通过 10 documentElement 属性获取，也可以通过 childNodes 列表访问，如下所示:

let html = document.documentElement; // 取得对<html>的引用 alert(html === document.childNodes[0]); // true
alert(html === document.firstChild); // true
let body = document.body; // 取得对<body>的引用 13

所有主流浏览器都支持 document.documentElement 和 document.body。
Document 类型另一种可能的子节点是 DocumentType。<!doctype>标签是文档中独立的部分，
这个例子表明 documentElement、firstChild 和 childNodes[0]都指向同一个值，即元素。
作为 HTMLDocument 的实例，document 对象还有一个 body 属性，直接指向元素。因为这个元素是开发者使用最多的元素，所以 JavaScript 代码中经常可以看到 document.body，比如:
其信息可以通过 doctype 属性(在浏览器中是 document.doctype)来访问，比如:
let doctype = document.doctype; // 取得对<!doctype>的引用
另外，严格来讲出现在元素外面的注释也是文档的子节点，它们的类型是 Comment。不过，由于浏览器实现不同，这些注释不一定能被识别，或者表现可能不一致。比如以下 HTML 页面:

<!-- 第一条注释 --> <html>
<body>
      </body>
    </html>
<!-- 第二条注释 -->

这个页面看起来有 3 个子节点:注释、元素、注释。逻辑上讲，document.childNodes 应该包含 3 项，对应代码中的每个节点。但实际上，浏览器有可能以不同方式对待元素外部的注释，比如忽略一个或两个注释。
一般来说，appendChild()、removeChild()和 replaceChild()方法不会用在 document 对象上。这是因为文档类型(如果存在)是只读的，而且只能有一个 Element 类型的子节点(即，已经存在了)。1

2. 文档信息

document 作为 HTMLDocument 的实例，还有一些标准 Document 对象上所没有的属性。这些属性
提供浏览器所加载网页的信息。其中第一个属性是 title，包含元素中的文本，通常显示在浏览器窗口或标签页的标题栏。通过这个属性可以读写页面的标题，修改后的标题也会反映在浏览器标题栏上。不过，修改 title 属性并不会改变<title>元素。下面是一个例子:

// 读取文档标题
let originalTitle = document.title;
// 修改文档标题
document.title = "New page title";

接下来要介绍的 3 个属性是 URL、domain 和 referrer。其中，URL 包含当前页面的完整 URL(地址栏中的 URL)，domain 包含页面的域名，而 referrer 包含链接到当前页面的那个页面的 URL。如果当前页面没有来源，则 referrer 属性包含空字符串。所有这些信息都可以在请求的 HTTP 头部信息中获取，只是在 JavaScript 中通过这几个属性暴露出来而已，如下面的例子所示:

// 取得完整的URL
let url = document.URL;
// 取得域名
let domain = document.domain;
// 取得来源
let referrer = document.referrer;

URL 跟域名是相关的。比如，如果 document.URL 是 http://www.wrox.com/WileyCDA/，则 document.domain 就是 www.wrox.com。

Sunny_媛

关注

23
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫