Javascript 发送点击至；“生成的源代码/计算的html”；通过Chrome开发工具控制台的按钮

我必须在一个网页上回顾大量的视频（下面的截图）。视频部分隐藏。要查看每个视频，我必须逐个单击

more

按钮（如下图所示）。

每页通常有40个视频。不断滚动并反复点击

more

按钮是乏味的，如果我继续这样做，我想我会有重复性的压力伤害

因此，我想我应该使用Chrome开发工具的控制台来识别按钮，并在一个批处理过程中发送它们

我可以使用Chrome开发工具中的

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>

然而，事实证明，

document.getElementsByClassName（“d2l标签文本”）

并没有抓取任何内容。结果数组的长度为

0

我试着使用一些其他选择器，发现

控制台

并不是从

生成的源代码/计算html

中抓取，而是只抓取

源代码

中的标记/元素（可以通过

右键单击，查看源代码

获得原始源代码）

---

我的问题：我做错了什么？如何让

控制台

获取

生成的源代码/计算html

更多

按钮？

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

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

theiframe.getElementsByClassName()

---

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

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

theiframe.getElementsByClassName()

---

从屏幕截图中可以看出，元素位于内部，这意味着无法从主

文档中直接访问它

要找到这样的元素，您必须递归地访问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是由页面在“关闭”模式下创建的，您可能需要在中钩住
元素.prototype.attachShadow
，如屏幕截图所示，元素位于a中，这意味着无法直接从主
文档访问它

要找到这样的元素，您必须递归地访问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'
模式下创建的，您可能必须在中钩住
元素.prototype.attachShadow
内容不在
iframe
中。谢谢你的建议。我看到了一些关于
iframe
是如何导致这种行为的参考资料。@提前谢谢，然后我想多看看html会有所帮助。一个非常基本的测试工作。table=document.getElementsByTagName（“表”）[0]；table.appendChild（document.createElement（'tr'））---然后在控制台中--var rows=document.getElementsByTagName（'tr'）；console.log（rows.length）；谢谢你帮我做这个，菠萝。你的基本测试对我来说很有效（我将代码放在一个新的
.htm
文件中并运行了该代码，它成功了。我已经将HTML DOM树的面包屑添加到我的原始问题中，请看一下（它们在两个屏幕截图中）。内容不在
iframe
中。感谢您的有用建议。我看到了一些关于
iframe
如何导致此类行为的参考资料。@事先谢谢，然后我认为查看更多html会有所帮助。非常基本的测试有效。table=document.getElementsByTagName（“table”）[0]；table.appendChild（document.createElement（'tr'））；然后在控制台中--var rows=document.getElementsByTagName（'tr'）；console.log（rows.length）；感谢您在这方面的帮助，菠萝。您的基本测试对我很有用（我将该代码放在一个新的
.htm
文件中并运行了该代码，它成功了。我已将HTML DOM树的面包屑添加到我的原始问题中，请看一看（它们在两个屏幕截图中）。您是否有指向问题页面的链接，或者您是否可以创建一个复制问题的沙盒？您是否有指向问题页面的链接，或者您是否可以创建一个复制问题的沙盒？谢谢您的建议。我直接在控制台中尝试了您的代码，但它不起作用。因此，我将尝试
Element.prototype、 稍后再附上建议。特别感谢您如此精美地记录了您的回复（带有链接）。我已经向上投票了您，如果
attachShadow
建议有效，我会将其标记为正确答案。首先在devtools中验证ShadowRoot的状态：谢谢。两个
ShadowRoots
都是打开的，这里的screencap：这意味着这个答案中的方法会起作用，但您需要适当地调整它。例如，那些不是但是元素标记名，我现在才从新的screencap中了解到。此外，元素可能使用了不同的事件监听器，如
mousedown
，您可以在devtools的“事件监听器”中看到子面板。无论如何，我不知道如何在不亲自尝试页面的情况下进一步提供帮助。这是因为事件侦听器被附加到
.d2l标签文本
，而不是
按钮
。显然，感谢您的建议。我直接在控制台中尝试了您的代码，但它不起作用。因此我将尝试
元素.prototype.attachShadow
稍后再提建议。特别感谢您将您的回复记录得如此精美（带有链接