通过使用Javascript类或ID获得DOM数组元素的索引位置(Javascript get el

2019-10-23 13:55发布

我的情况

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

现在我想返回数组项目键-在阵列中的元件的位置- (例如domElements[34]的阵列用于与该元件在搜索id="asd"

我怎样才能做到这一点?

如果不是ID我要搜索槽class="asd hey"

任何帮助表示赞赏,谢谢!

注:并非jQuery的,我需要它的纯JavaScript在这种情况下,

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


Answer 2:

不是字面代码,但如果你遍历DOM元素

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

这有一个,而不是选择所有的DOM元素,您只需选择的假设parentElement的要素列表中的-这种方式更符合逻辑,肯定有很多更有效。



文章来源: Javascript get element index position in DOM array by class or id