Question

我正在尝试通过getElementsByClassName收集这些HTML对象，并将它们推送到JavaScript数组中，然后我想创建一个JavaScript alert来显示这些名称。我一直在尝试这几个小时。我做错了吗？

＆＃13;

var names = []
var elm = document.getElementsByClassName('name');
names.push(elm);
var arr = names.join();
alert(arr)

＆＃13;

<h2>
  List of People:
</h2>

<ul class='people'>
  <li class='name'>
    Clara
  </li>
  <li class='name'>
    James
  </li>
  <li class='name'>
    Sara
  </li>
</ul>

＆＃13;

Answer 1

getElementsByClassName不会在元素中提供文本，而是提供元素本身。

此外，您不会将它们作为正确的JavaScript数组，而是HTMLElements的集合。

以下是您可以做的事情：

var names = []
var elements = document.getElementsByClassName('name');
for(var i=0; i<elements.length; i++) names.push(elements[i].textContent)
var nameList = names.join()
alert(nameList)

或者，您可以使用Array.from和map：

Array.from(elements).map((elem) => elem.textContent)

请注意，我正在使用elements[i].textContent来获取每个元素中的文本。

Answer 2

只需尝试使用querySelectorAll()。然后应用Nodelist#forEach()来迭代节点列表。最后使用您想要的元素或元素属性推送到数组

var names = []
var elm = document.querySelectorAll('.name').forEach(function(a){
names.push(a.innerHTML);
});

var arr = names.join();
console.log(arr);
alert(arr)

<h2>
  List of People:
</h2>

<ul class='people'>
  <li class='name'>
    Clara
  </li>
  <li class='name'>
    James
  </li>
  <li class='name'>
    Sara
  </li>
</ul>

Answer 3

当我们按类名调用元素时，它返回数组，因此你运行循环...

人员名单：

 <ul class='people'>
 <li class='name'>
   Clara
 </li>
 <li class='name'>
  James
</li>
<li class='name'>
  Sara
</li>

 var names = []
 var elm = document.getElementsByClassName('name');
 for(var i = 0; i < elm.length; i++) {
    names.push(elm[i].innerHTML);
   }
 names.join();
 alert(names);

这里是jsfiddle运行示例https://jsfiddle.net/9pt0hf0s/1/

如何从HTML获取ElementsByClassName并将它们推送到JavaScript数组中？那我怎么能提醒这个阵列呢？

3 个答案:

人员名单：