查找HTMLButtonElement類型的所有DOM元素

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關於Element.getElementsByTagName（）的文章

請注意，盡管HTML也具有<input type="button" />元素。 如果您還想拉這些，最好使用document.querySelectorAll() ，它允許我們指定多個逗號分隔的選擇器：

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

此外，您還可以通過將ARIA屬性role設置為"button"來定義元素上的按鈕行為：

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

如果您還想拉這些，還可以在上面的querySelectorAll調用中包含[role=button] 。