前端开发中经常提到的iframe、DOM是什么?
iframe 是什么？
iframe（Inline Frame，内联框架）是 HTML 中的一个标签，用于在当前网页中嵌入另一个独立的网页。它相当于在页面中开辟一个 “小窗口”，这个窗口可以加载并显示其他 URL 的内容（如另一个网页、文档等）。
特点：
- 嵌入的内容与父页面是相对独立的，拥有自己的
document、window对象和 DOM 结构。 - 父页面和 iframe 中的页面可以通过特定 API 进行通信（如
postMessage），但受浏览器同源策略限制（不同域名下的页面通信需要额外配置）。
简单示例：
<!-- 父页面中嵌入百度首页 -->
<iframe src="https://www.baidu.com" width="800" height="600" title="百度首页"
></iframe>
DOM 是什么？
DOM（Document Object Model，文档对象模型）是浏览器对 HTML/XML 文档的结构化表示方式，它将文档中的元素（如标签、文本、属性等）转换为一个树形结构的 “对象”，让编程语言（如 JavaScript）可以访问和操作这些元素。
核心概念：
- 树形结构：DOM 以 “节点”（Node）为基本单位，整个文档是一个 “文档节点”（
document），根节点是<html>，下面包含<head>、<body>等子节点，形成层级关系（类似文件夹的目录结构）。 - 可操作性：通过 JavaScript 可以对 DOM 进行增删改查，例如：
- 查找元素（
document.getElementById()） - 修改内容（
element.textContent） - 改变样式（
element.style.color） - 添加 / 删除节点（
document.createElement()、parent.removeChild()）
- 查找元素（
DOM 树简化示例：
document（文档节点）
└── html（元素节点）├── head（元素节点）│ └── title（元素节点）│ └── "页面标题"（文本节点）└── body（元素节点）└── p（元素节点）└── "Hello World"（文本节点）
两者的关系
当页面中包含 iframe 时：
- 父页面有自己的 DOM 树。
- iframe 中加载的页面也有独立的 DOM 树。
- 父页面可以通过
iframe元素的contentDocument或contentWindow.document属性访问 iframe 内部的 DOM（需满足同源策略），例如：javascript
// 访问 iframe 中的 DOM const iframeDom = document.querySelector('iframe').contentDocument; const iframeTitle = iframeDom.title; // 获取 iframe 页面的标题
简单说，iframe 是嵌入外部页面的容器，而 DOM 是页面内容的结构化模型，两者结合可实现复杂的页面嵌套和交互。