javascript - 通过 Chrome 开发工具控制台将点击发送到 "generated source/computed html"按钮

Question

我必须查看网页上的大量视频(下面的屏幕截图)。视频部分隐藏。要查看每个视频，我必须一一点击更多按钮(如下图所示)。

每页通常有 40 个视频。不断地滚动并一遍又一遍地点击更多按钮是乏味的，如果我继续这样做，我想我会遭受重复性压力损伤。

所以，我想我应该使用 Chrome 开发工具的控制台来识别按钮并在一个批处理过程中向它们发送所有点击。

我可以使用 Chrome 开发工具中的 inspect 工具找到更多按钮，如下所示:

通过inspect查看more按钮的DOM树面包屑(请点击放大，下面有两个图像部分):

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>

并且更多按钮的class是d2l-label-text

我想我应该在控制台中执行类似的操作:

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

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

但是，事实证明 document.getElementsByClassName("d2l-label-text") 没有抓取任何内容。结果数组的长度为0。

我尝试使用其他一些选择器，发现控制台没有从生成的源/计算的html中抓取，它只是抓取标签/元素在源代码中(可以通过右键单击，查看源代码获得原始源代码)。

我的问题:我做错了什么？如何让控制台获取生成的源/计算的html更多按钮？

Answer 1

从屏幕截图中可以看出，该元素位于 ShadowRoot 内。这意味着它不能直接从主文档访问。

要找到这样的元素，您必须递归访问 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 是由页面在 'close' 模式下创建的，您可能必须在 page context script 中 Hook Element.prototype.attachShadow .