JavaScript如何在變量中存儲DOM元素？

Question

我的意思是當你執行以下操作時，JavaScript如何存儲DOM元素：

var foo = document.getElementsByTagName('p');

foo變成了什么？ 一個對象數組？ 以及如何向該變量添加更多元素，例如：

var bar = document.form[0].getElementsByTagName('input'); // 5 elements
var foo = document.form[1].getElementsByTagName('input'); // 4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); // 9 logged values
}

是否可以向已經包含元素的變量添加更多相同類型的元素？ 我是否必須循環遍及我想要添加的變量中的所有元素，並將它們“推”到我想要所有數據的變量中？

Answer 1

getElementsByTagName （以及類似的方法，如getElementsByName ， getElementsByClassName等）返回一個NodeList （或HTMLCollection ，顯然取決於瀏覽器，另請參閱HTMLCollection，NodeLists和對象數組之間的差異 ）。

盡管它是一個類似數組的對象，即它具有數字屬性和.length屬性，但您無法向其中添加新元素。

要修改NodeList ，必須將其轉換為常規數組。 這可以通過數組方法.slice輕松實現，同時您可以使用.concat合並兩個列表：

bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

這是有效的，因為大多數本機數組方法的定義方式使得參數不必是實際數組，而是類似數組的對象。

NodeList和最終數組之間值得注意的差異是：

• 該陣列不再存在，即添加新DOM節點時不會自動更新集合。
• 最終（合並）數組中的元素不一定按文檔順序排列。

Answer 2

bar = + foo;

這僅適用於字符串連接，它將是bar+= foo

但這里的bar和foo都是DOM對象。 所以如果你想添加相同類型的元素，你可以創建一個數組。

例如，

var myArray =[]
myArray.push(foo);
myArray.push(bar);

Answer 3

foo成為了這個功能。 因此，您無法將foo添加到bar，因為這沒有意義。 這就像試圖做：

document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

您可以在單個數組中包含多個元素。 我發現這是達到解決方案的最簡單方法。