iframe.contentDocument 和document.documentElement的区别

深度学习研究员

于 2024-08-22 09:54:59 发布

阅读量308

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45266691/article/details/141419338

版权

iframe.contentDocument 和 document.documentElement 是用于访问不同内容的两个不同的对象或属性。

1. `iframe.contentDocument`

内容: iframe.contentDocument 代表的是 <iframe> 元素所嵌入的文档的 Document 对象。它允许你访问和操作嵌入的文档（即 iframe 内部加载的 HTML 内容）。
用途: 通过 contentDocument，你可以获取 iframe 内部的元素，执行 DOM 操作，读取或修改嵌入页面的内容。
常用场景:
- 操作嵌入在 iframe 中的网页内容。
- 读取或修改 iframe 内部的 DOM 结构。
- 与 iframe 内的 JavaScript 进行交互（如果允许同源策略）。
示例:

var iframe = document.querySelector("iframe");
var iframeDoc = iframe.contentDocument; // 获取 iframe 内部的 document 对象
var elementInsideIframe = iframeDoc.getElementById("someElementId"); // 操作 iframe 内的元素

2. `document.documentElement`

内容: document.documentElement 返回当前文档的根元素，也就是整个 HTML 文档的根节点 <html> 元素。
用途: 通过 document.documentElement，你可以访问和操作整个文档的根元素，通常用于获取或修改文档级别的属性，比如页面语言、方向、样式等。
常用场景:
- 修改整个页面的属性，如 dir 属性设置页面文本方向。
- 访问或修改与根元素相关的样式和属性。
- 处理整个页面级别的操作，例如滚动位置。
示例:

var rootElement = document.documentElement; // 获取整个文档的根元素 <html>
console.log(rootElement.tagName); // 输出 "HTML"

rootElement.lang = "en"; // 修改页面的语言设置