Chrome中HTMLElement.prototype.getInnerHTML方法的用途与历史探究

HTMLElement.prototype.getInnerHTML是Chromium内核浏览器（如Chrome、Edge）独有的非标准方法，Firefox和Safari均未实现，这也是公开资料极少的原因。

与标准innerHTML的核心区别 #

• 调用方式：getInnerHTML是方法，需通过element.getInnerHTML()调用；innerHTML是属性，直接通过element.innerHTML读取。
• Shadow DOM支持：这是最关键的差异。getInnerHTML支持传入可选配置参数{ includeShadowRoots: true }，调用后会递归返回元素自身及所有嵌套Shadow DOM的HTML内容；而标准innerHTML仅返回元素自身的DOM内容，完全不会包含Shadow DOM部分。
• 格式化特性：部分场景下，getInnerHTML可返回更易读的格式化HTML，而innerHTML通常返回紧凑的未格式化内容（具体行为取决于浏览器内部实现）。

存在的原因与历史 #

这个方法是Chromium团队为内部需求添加的：

• 主要用于浏览器DevTools的调试功能，方便开发者查看包含Shadow DOM的完整HTML结构；
• 也服务于浏览器内部的部分功能逻辑，并非为通用Web开发设计，因此从未提交至W3C或WHATWG进行标准化，自然没有公开的官方文档。

实际使用建议 #

由于是非标准API，绝对不要在生产环境代码中依赖getInnerHTML，一旦Chromium团队移除该方法，代码会直接失效。如果需要读取Shadow DOM内容，建议使用标准API实现：

// 读取元素自身+Shadow DOM内容的标准写法
function getFullHTML(element) {
  let html = element.innerHTML;
  if (element.shadowRoot) {
    html += element.shadowRoot.innerHTML;
    // 如需递归处理嵌套Shadow DOM，可自行扩展逻辑
  }
  return html;
}

内容的提问来源于stack exchange，提问作者Zachiah