Javascript 通过 class 或 id 获取 DOM 数组中的元素索引位置

Question

我的情况

var domElements = document.body.getElementsByTagName('*');

现在我想 return 数组项键 - 元素在数组中的位置 - （例如 domElements[34]）在数组中搜索带有 id="asd" 的元素。

我怎样才能做到这一点？

如果我想搜索 class="asd hey" 而不是 ID 怎么办？

感谢任何帮助，谢谢！

注意：不在 jquery 中，在这种情况下我需要纯 javascript

Answer 1

这样试试

var matches = document.querySelectorAll("#asd");

如果您想按 class

搜索

var matches = document.querySelectorAll(".asd");

如果您想要代码的索引

像这样尝试

var domElements = document.body.getElementsByTagName('*');

for(var i=0;i<domElements.length;i++){
   if(domElements[i].id==="asd"){
      // search by id 
      // index i 
   }
   if(domElements[i].className==="asd"){
      // search by class 
      // index i 
   }
}

编辑

还有另一种方法可以找到索引

像这样尝试

var domElements = document.body.getElementsByTagName('*');
var domList= Array.prototype.slice.call(document.body.getElementsByTagName('*'));
var itemList = Array.prototype.slice.call(document.querySelectorAll(".asd"));
console.log(domList.indexOf(itemList[0])) // if you wanna find one index

//if you wanna search all index of class 

for(var i=0;i<itemList.length;i++)
  console.log(domList.indexOf(itemList[i]))

Answer 2

不是文字代码，但如果您遍历 dom 个元素

for (var i = 0; i < parentElement.children.length; i++) {
    var item = parentElement.children[i];
    if (item.getAttribute('id') === 'asd') {
        return i;
    }
}

这有一个假设，而不是 selecting ALL DOM 元素，你只是 select 你的元素列表的 parentElement - 这种方法更合乎逻辑当然效率更高。

Answer 3

我想你是在问这个：

var li = document.querySelectorAll("li");
function cutlistitem(lielm) {
lielm.addEventListener("click", function () {
    lielm.classList.toggle("done")
})
};
li.forEach(cutlistitem);

我正在创建一个待办事项列表应用程序，我在其中创建了一个待完成任务的无序列表，因为 <ul> 每个任务都在 <li> 中。现在我想要的是：为每个 li 元素添加一个事件侦听器，我需要为其获取 li 列表的每个元素。我运行在 li 列表的每个元素上循环 forEach 并为每个元素添加一个事件侦听器。要获取元素的索引，您可以使用 indexOf 方法。

Answer 4

最简单的方法

var list = [].slice.call(document.querySelectorAll('.class-name'));
var listIndex = list.filter(function(el, index){
    if(el.id === 'id'){
       return index;
    }
})

Javascript 通过 class 或 id 获取 DOM 数组中的元素索引位置

Javascript get element index position in DOM array by class or id

javascript

dom

elements

selector