chrome 中 getInnerHTML 函数的用途/历史是什么

Question

Chrome 似乎已经定义了

HTMLElement.prototype.getInnerHTML

。我在网上找不到任何关于此的信息。显然 chrome 仍然提供

innerHTML

属性，它按预期工作，但我想知道为什么

getInnerHTML

方法在那里。我在 safari 和 firefox 中进行了测试，但它不存在，所以我假设它是 chrome 特定的。我想知道这种方法的目的/历史，而不是

innerHTML

Answer 1

它似乎是 Angular 的 Protractor（2023 年 8 月 EOL）测试框架以及旧版本 Selenium 的一部分。 Protractor 是 Selenium Web 驱动程序的包装器。

在 Protractor 中，该方法存在于：

webdriver.WebElement.prototype.getInnerHtml

。此方法的返回类型为

!webdriver.promise.Promise

，将使用元素的内部 HTML 进行解析。它是一个函数，因为该值并不总是立即可用。

/**
 * Schedules a command to retrieve the inner HTML of this element.
 * @return {!webdriver.promise.Promise.<string>} A promise that will be
 *     resolved with the element's inner HTML.
 */
webdriver.WebElement.prototype.getInnerHtml = function() {
  return this.driver_.executeScript('return arguments[0].innerHTML', this);
};

我认为它是在 Chrome 中，因为 Angular 是由 Google 维护的。

你可以随时添加你自己的polyfill：

if (HTMLElement.prototype.getInnerHTML === undefined) {
  HTMLElement.prototype.getInnerHTML = function() {
    return this.innerHTML;
  }
}

Answer 2

这个功能好像已经添加了 帮助序列化 DOM，包括 Shadow DOM 元素。

这很方便，因为像

HTMLElement.prototype.outerHTML

和

HTMLElement.prototype.innerHTML

这样的常用方法不适用于 Shadow DOM。

有关此方法如何工作的更多信息，您可以查看 Chromium 开发者的帖子： https://github.com/mfreed7/declarative-shadow-dom?tab=readme-ov-file#serialization

除此之外，这里还有一个 JavaScript polyfill 来支持其他浏览器中的方法： https://gist.github.com/developit/54f3e3d1ce9ed0e5a171044edcd0784f