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

【问题标题】：Javascript get element index position in DOM array by class or idJavascript通过类或id获取DOM数组中的元素索引位置
【发布时间】：2015-06-30 09:11:22
【问题描述】：

我的情况

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

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

我怎样才能做到这一点？

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

任何帮助表示赞赏，谢谢！

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

【问题讨论】：

@fuyushimoya 不，更新的问题，我需要纯 js 抱歉：P
jsfiddle.net/kb3621gb/1 看到这个。

标签： javascript dom selector elements

【解决方案1】：

这样试试

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

如果你想按类别搜索

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]))

【讨论】：

对不起，我需要返回 domElements 数组中的位置，我不能直接完成
位置是什么意思？？索引??
谢谢，我会稍等一下，看看有没有更好的解决方案，否则我会接受你的，谢谢！！
@sbaaaang 我添加了另一种方式。请尝试:)

【解决方案2】：

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

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

这假设您只需选择元素列表中的parentElement，而不是选择所有 DOM 元素 - 这种方法更合乎逻辑，当然也更有效。

【讨论】：

【解决方案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 方法。

【讨论】：

【解决方案4】：

最简单的方法

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

【讨论】：