Question

我想扫描页面以查找HTMLButtonElement类型的所有DOM元素，以便我可以获得它们的确切位置。然后，我会使用此位置在顶部放置另一个按钮。

我一直在通过以下代码片段扫描所有DOM元素：

var all = document.getElementsByTagName("*");
var temp = document.createElement('button');
for (var i = 0, max = all.length; i < max; i++) {
    //Loop through all[i] to see if it is an object of type HTMLButtonElement
}

Answer 1

正如评论中已经指出的那样，你可以简单地使用：

document.getElementsByTagName("button");

Element.getElementsByTagName()方法返回具有给定标记名称的元素的实时HTMLCollection。搜索指定元素下面的子树，不包括元素本身。返回的列表是实时的，这意味着它会自动使用DOM树更新自己。因此，不需要使用相同的元素和参数多次调用Element.getElementsByTagName()。

- MDN's article on Element.getElementsByTagName()

请注意，HTML也有<input type="button" />元素。如果您想要提取这些内容，最好使用document.querySelectorAll()，这样我们就可以指定多个以逗号分隔的选择器：

document.querySelectorAll('button, input[type=button]');

此外，您还可以通过将ARIA属性role设置为"button"来定义元素上的按钮行为：

<div role="button">...</div>

如果您还想提取这些内容，还可以在上述[role=button]来电中加入querySelectorAll。

找到HTMLButtonElement类型的所有DOM元素

1 个答案: