JavaScript - 如何从节点列表中选择元素

Question

这是我的 HTML:

<button class="btn" data-key="123456789">Show</button>
<button class="btn" data-key="abcdefghi">Show</button>

我还有具有匹配数据键属性的 iframe(即，对于每个带有键的按钮，都会有一个具有相同键的相应 iframe)。

当单击具有相应键的按钮时，我需要抓取具有给定键的 iframe。

首先，我使用给定的键获取所有项目:

var keyElems = document.querySelectorAll('[data-key="' + key + '"]');

这将返回一个带有 iframe 和按钮的节点列表。在 keyElems 中，我希望能够获取 iframe 元素。为什么我不能做这样的事情？

var frame = keys.getElementsByTagName('iframe');

我假设这似乎不起作用，因为键是一个节点列表。有没有比仅仅执行循环并检查元素是否是 iframe 更优雅的方法？

Answer 1

您只需修改选择器即可选择 iframe

var keyElems = document.querySelectorAll('iframe[data-key="' + key + '"]');

如果您只希望返回一个 iframe，请改用 querySelector。它返回 NodeList

中的第一个元素