访问具有公共类名的元素数组中的元素索引

Access to index of element in array of elements with common classname

本文关键字：元素 数组 索引 访问      更新时间：2023-09-26

正如我在主题中所说的那样，当我尝试查找数组中某个元素的索引时，该元素由具有通用类名的元素创建，代码为：document.getELementsByClassName（"blabla"）。

var a, b, pe;
    a=document.getElementById("a");    
    b=document.getElementById("b");
    pe=document.getElementsByClassName("o");
    var k=pe.indexOf(b);
    alert(k);
<p class="o" id="a"></p>
<p class="o" id="b"></p>

正如

许多人指出的那样document.getElementsByClassName("myclass");返回的是NodeList而不是数组。因此，您无法利用本机数组方法，例如 indexOf 或 forEach 。从文档中：

NodeList的使用方式非常类似于数组，在它们上使用Array.prototype方法很诱人，但是它们没有这些方法。JavaScript 有一个基于内置对象（如 Arrays）和主机对象（如 NodeLists）原型的继承机制。数组实例继承数组方法（如forEach或map），因为它们的原型链如下所示：

myArray --> Array.prototype --> Object.prototype --> null (The prototype chain of an object can be obtained by calling Object.getPrototypeOf several times.)

也就是说，您基本上希望将 NodeList 转换为数组。您可以执行以下操作：

var turnObjToArray = function(obj) {
  return [].map.call(obj, function(element) {
   return element;
 })
};
var a=document.getElementById("a");    
var b=document.getElementById("b");
var pe=document.getElementsByClassName("o");
var listBox = turnObjToArray(pe);
console.log(listBox);
alert(listBox.indexOf(a)); //Normal array methods can be used here.

演示

希望它能让你开始正确的方向。

这个过程可以通过多种方式完成，但根据我的说法，您也可以按如下方式执行此操作，但我仍然建议使用 jquery。我只是在这里写代码，你可以理解，

我使用 querySelectorAll，它返回所有具有类 o 的元素。因为所有浏览器都不支持getElementByClass名称：检查此链接：IE8不支持getElementByClass

。

遍历所有对象并匹配对象。

var a=document.getElementById("a");    
var b=document.getElementById("b");
var v=document.getElementById("v");
var pe=document.querySelectorAll('.o');
for( i in pe)
{
    if(v == pe[i])
    {
        alert("found index "+i);
    }
}
<p class="o" id="a"></p>
<p class="o" id="b"></p>
<p class="o" id="v"></p>

由于从getElementsByClassName返回的对象是"类似数组"的，因此您可以执行以下操作：

var k = Array.prototype.indexOf.call(pe,b);

因为 pe 是"数组样"，indexOf 可以工作，但你必须直接从 Array.prototype 调用 indexOf，然后使用 .call 设置调用对象（this）。

从getElementsByClassName返回的对象是一个HTMLCollection。若要查看可以对此对象执行哪些操作，可以查看以下文档。

未来的提示：在Chrome中按F12或右键单击任何元素并选择"检查元素"。这将打开开发工具，在控制台选项卡中，您将看到错误。

你会看到 pe 没有一个名为 indexOf 的函数，因为它不是 Array 的实例，而 indexOf 位于 Array.prototype 上。

有关原型和构造函数（Array 是本机构造函数）的更多信息，请点击此处。

相关文章：