iframe.contentDocument 和document.documentElement的区别
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"; // 修改页面的语言设置
区别总结
iframe.contentDocument用于访问和操作嵌入在<iframe>内部的文档。document.documentElement用于访问当前文档的根元素<html>。
它们的作用范围不同：iframe.contentDocument 是针对嵌入的 iframe 内容，而 document.documentElement 是针对整个当前文档的根元素。