Question

为什么这不起作用？

var nodes = document.getElementsByClassName("abc");
nodes += document.getElementsByClassName("xyz");

第二行破坏了节点变量。类页面存在于HTML页面中。有什么方法可以使这个工作吗？

Answer 1

这不是您在JavaScript中获取数组的方式。您可以在JavaScript Array

了解更多相关信息

要回答您的问题，可能的解决方案是

var nodes = [element1];
nodes.push(element2);

希望这有帮助！

Answer 2

无法追加HTMLCollection。 https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

但是，您可以将其转换为数组并加入它们。

var nodes = document.getElementsByClassName("abc");
var nodes2 = document.getElementsByClassName("xyz");


var nodeList = []
  .concat(Array.from(nodes))
  .concat(Array.from(nodes2));

console.log(nodeList);

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<div class="abc">1</div>
<div class="abc">2</div>
<div class="abc">3</div>

<div class="xyz">4</div>
<div class="xyz">5</div>

Answer 3

你也可以试试这个：

var abc_nodes = Array.prototype.slice
                     .apply(document.getElementsByClassName("abc")),
    xyz_nodes = Array.prototype.slice
                     .apply(document.getElementsByClassName("xyz"));

var all_nodes = abc_nodes.concat(xyz_nodes);

Answer 4

getElementsByClassName返回一个HTMLCollection，它是array-like object，因此您可以使用

轻松地将其解析为数组

var nodes = [document.getElementsByClassName("abc")];
nodes = nodes.concat([document.getElementsByClassName("xyz")];

但是，它的内部结构与对象相同，因此您也可以使用Object.values。

var nodes = Object.values(document.getElementsByClassName("abc"));
nodes = nodes.concat(document.getElementsByClassName("xyz"));

你可以将它包装在一个函数中，该函数接受一个任意长度的类名并从中返回一个数组：

＆＃13;

function nodesToArray(...args) {
  let final = [];
  for (let arg of args) {
  	 final = final.concat(Object.values(document.getElementsByClassName(arg)));  
  }
  return final;
}

console.log(nodesToArray('abc', 'xyz'));

＆＃13;

<div class="abc">bla</div>
<div class="abc">bla</div>
<div class="xyz">bla</div>
<div class="xyz">bla</div>

＆＃13;

可以通过nodesToArray('abc', 'xyz')调用。

现在所有这些都可以包含在一个单行中：

＆＃13;

const nodesToArray = (...args) => args.map(arg => Object.values(document.getElementsByClassName(arg))).reduce((node1, node2) => node1.concat(node2));

console.log(nodesToArray('abc', 'xyz'));

＆＃13;

<div class="abc">bla</div>
<div class="abc">bla</div>
<div class="xyz">bla</div>
<div class="xyz">bla</div>

＆＃13;

因此，您可以通过类名

获取HTML节点的数组

Javascript：附加到节点的HTMLcollection

4 个答案: