通过 Chrome Dev Tools 控制台向 "generated source/computed html" 按钮发送点击

Question

我要在一个网页上审核大量视频（如下截图）。视频被部分隐藏。要查看每个视频，我必须一个一个地单击 more 按钮（如下图所示）。

通常每页有 40 个视频。不断滚动并一遍又一遍地单击 more 按钮很乏味，如果我继续这样做，我想我会受到重复性压力伤害。

所以，我想我会使用 Chrome 开发工具的 console 来识别按钮并在一个批处理过程中发送所有点击。

我可以使用 Chrome Dev Tools 中的 inspect 工具找到 more 按钮，如下所示：

more 按钮的 DOM-树面包屑来自 inspect（请点击放大，下面有两个图像部分）：

more 按钮标记代码如下所示：

<button class="d2l-label-text" type="button">
    <d2l-icon class="d2l-button-subtle-icon" icon="d2l-tier1:chevron-down" dir="ltr"></d2l-icon>
    <span class="d2l-button-subtle-content"><!---->more<!----></span>
    <slot></slot>
</button>

而 more 按钮的 class 是 d2l-label-text

我想我会在 console:

中做这样的事情

> let allbuttonsArray = document.getElementsByClassName("d2l-label-text");

  for (let eachbutton of allbuttonsArray) {
    eachbutton.click();
  }

然而，事实证明document.getElementsByClassName("d2l-label-text")并没有抓住任何东西。结果数组的长度为0.

我试过其他一些选择器，发现 console 不是从 generated source/computed html 中抓取的，它只是抓取 [=30 中的 tags/elements =]（可以通过right-click, view source获得的原始来源）。

我的问题：我做错了什么？如何让 console 抓住 generated source/computed html more 按钮？

Answer 1

您知道您要获取的内容是否在页面的 iframe 中吗？

如果是这样，我相信您需要先获取 iframe，然后再使用

theiframe.getElementsByClassName()

Answer 2

如屏幕截图所示，该元素位于 ShadowRoot 内，这意味着无法直接从主 document.

访问它

要找到这样的元素，您必须递归访问 ShadowRoot 链。
在您的情况下，此链中有两个元素。

for (const more of document.querySelectorAll('d2l-more-less')) {
  for (const buttonSubtle of more.shadowRoot.querySelectorAll('d2l-button-subtle')) {
    const btn = buttonSubtle.shadowRoot.querySelector('button');
    if (btn) btn.dispatchEvent(new MouseEvent('click', {bubbles: true}));
  }
}

如果 shadowRoot 是由页面在 'closed' 模式下创建的，您可能必须在 page context script.

中挂钩 Element.prototype.attachShadow

通过 Chrome Dev Tools 控制台向 "generated source/computed html" 按钮发送点击

send clicks to "generated source/computed html" buttons via Chrome Dev Tools console

javascript

google-chrome-devtools

google-chrome-console