使用 array.join() 来内爆类名数组 javascript

Question

我有一些 html 标签，我正在尝试使用 javascript 数组加入它们。

我尝试打印出数组以查看它的外观。如果它尝试打印出一个数组项，它可以工作但整个数组不显示

<p>Click the button to join the array elements into a string.</p>

<button onclick="myFunction()">Try it</button>

<p class="demo">Banana</p>

<p class="demo">Orange</p>

<p class="demo">Appl</p>

<p id="demo"></p>

<script>

function myFunction() {

  var fruits = document.querySelectorAll(".demo")[];

  var y = document.getElementById("demo");

  y.innerHTML = fruits.join(',');

}

</script>

我希望它将类名数组连接在一起并打印出结果，但它什么也没显示。我不太擅长 javascript，希望得到帮助。

Answer 1

我不确定您要通过添加[]到查询选择器代码的末尾来做什么；如果那是你的想法，那不会把它变成一个数组。document.querySelectorAll返回 HTML 元素的集合，但不是实际的数组。要转换它，您有一些选择。你可以这样做：var fruits = [...document.querySelectorAll(".demo")];...是扩展运算符，它将结果集合扩展到新数组中。或者你可以这样做：var fruits = Array.from(document.querySelectorAll(".demo"));或者，当然，您可以手动循环遍历集合并推送到数组，但我不建议这样做。此外，由于扩展运算符和Array.from方法都来自 ES6，我建议切换到 usinglet或const代替var，因为它们具有块范围（并且，在 const 的情况下，常量值强制执行）比旧的功能范围var。