自定义数据属性 - JavaScript - 如何从节点列表中选择元素

custom data attribute - JavaScript - how to select elements from node list

本文关键字：列表 选择 节点 元素 数据属性 JavaScript 自定义      更新时间：2023-09-26

这是我的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 更优雅的方法？

你只需要修改你的选择器来选择iframe 

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

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

document.querySelectorAll返回一个nodelist，而不是单个HTML元素，所以它没有方法querySelectorAll。换句话说，不能链接querySelectorAll方法调用。

但是你没有必要;只需修改你的选择器：

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

对于更复杂的目的，需要更多计算并且仅扩展选择器不是一种选择，您可以利用array.prototype.filter 

[].filter.call(document.querySelectorAll('[data-key="'+key+'"]'), function(el) {
    return el.tagName == 'iframe';
});
相关文章：