如何通過VanillaJS獲取具有選擇器屬性的所有元素？

Question

我想讓所有元素都具有特定的data- attribute屬性，但是我需要單獨操作它們。 檢查我的代碼：

的HTML

<div data-something></div>
<div data-something></div>

的JavaScript

document.querySelectorAll("[data-something]").onclick = function() {
    ...
}

Answer 1

您將獲得所有這些元素，但這意味着您將獲得一個nodeList ，這是一個類似數組的對象，其中包含必須迭代的所有元素

var elements = document.querySelectorAll("[data-something]");

for (var i=0; i<elements.length; i++) {

    elements[i].addEventListener('click', function() {
    ...
    }, false);
}

Answer 2

下面是如何獲取具有選擇器屬性的所有元素並為每個元素創建onclick偵聽器的方法。

運行代碼段，然后單擊“單擊我-A”或“單擊我-B”鏈接進行演示：

 var elements = document.querySelectorAll('[data-something]'); Array.prototype.forEach.call(elements, function (element) { element.onclick = function () { alert(element.innerHTML); }; }); 

 <div data-something>click me -- A</div> <div data-something>click me -- B</div> 

您也可以使用.addEventListener('click', someFunction)代替.onclick = someFunction 。