Javascript获取DOM元素的索引

Question

你能帮我找到被点击的 DOM 按钮的 id 的方法吗

out=document.getElementsByClassName("mybutton")
HTMLCollection(2) [button.mybutton, button.mybutton]
0
:
button.mybutton
1
:
button.mybutton
length
:
2
__proto__
:
HTMLCollection

Answer 1

使用buttonElement.addEventListener('click', clickHandlerFunction);为按钮添加点击处理程序buttonElement.addEventListener('click', clickHandlerFunction); .

 function onMyButtonClick(clickEvent) { var button = clickEvent.target; console.log('ID of clicked button: ' + button.id); } document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.mybutton').forEach(function (button) { button.addEventListener('click', onMyButtonClick); }) });

 <button id="button-1" class="mybutton" type="button">Button 1</button> <button id="button-2" class="mybutton" type="button">Button 2</button>

Answer 2

1. 选择文档中的所有按钮。
2. 使用 for 或 forEach 遍历按钮列表并向每个按钮添加事件侦听器。
3. 使用 getAttribute() 方法获取元素的特定属性（例如“id”）。

html：

<button class="mybutton" id ="one">1</button>
<button class="mybutton" id="two">2</button>
<button class="mybutton" id="three">3</button>

javascript:

let myButtons = document.getElementsByClassName("mybutton");

for (let i = 0; i < myButtons.length; i++) {
  myButtons[i].addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
}

我们也可以使用 forEach 方法，但是因为 document.getElementsByClassName 返回一个HTMLCollection ，而不是一个数组，使用 ES6 Array.from()或从类似数组的对象构建数组的spread我们可以使用 forEach 方法来迭代 HTMLCollection 对象。 更多细节在这里

[...myButtons].forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

或者您可以使用返回NodeList而不是 document.getElementsByClassName() 的 document.querySelectorAll()。

let myButtons = document.querySelectorAll(".mybutton");

myButtons.forEach(function(button) {
  button.addEventListener("click", function(event) {
    event.preventDefault();
    console.log(this.getAttribute("id"));
  });
});

Answer 3

如果你的按钮看起来像这样

<button type="button" id="save" class="button">Save</button>
<button type="button" id="cancel" class="button">Cancel</button>

您可以监听按钮上的点击事件并使用event.target.id获取其 id

function handleClick(event) {
  console.log(event.target.id);  // prints the id of the clicked button
}

document.querySelectorAll(".button").forEach(function(button) { 
  button.addEventListener('click', handleClick);
});

ES6方法：

const buttons = document.querySelectorAll(".button");
Array.from(buttons, button => button.addEventListener('click', () => {
    console.log(button.id) // prints the id of the clicked button
}));

Answer 4

只需使用 for 循环，然后检查该元素的属性：

<button onClick="buttonClick($event)" id="something1" class="mybutton"></button>
<button id="something2" class="mybutton"></button>
<button id="something3" class="mybutton"></button>

function buttonClick(event) {
 for(var i = 0; i < out.length; i++) {
  if (event.target.attribute[0] === out[i].attributes[0].value){ 
  do something}
 }
}

这是如果您需要检查某些内容，但是单击功能单独使用事件将检查单击了哪个按钮。