使用通用類名訪問元素數組中的元素索引

Question

就像我在主題中所說的那樣，當我嘗試在具有通用類名的元素創建的數組中查找某些元素的索引時，其代碼為：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> 

Answer 1

正如許多人指出的那樣， 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.

演示

希望它能幫助您朝正確的方向開始。

Answer 2

這個過程可以通過很多方法來完成，但是按照我的方法，您也可以按照以下步驟進行操作，但是我仍然建議使用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> 

Answer 3

由於從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上。

更多關於原型和構造函數（數組是土生土長的構造函數） 這里 。