Question

我用getElementById尝试了它并且它有效。但现在我想要多个div，所以我必须使用类。所以我把方法改为getElementsByClassName，现在它说未定义。

（当选择中的选项发生变化时，将调用该函数。这可以正常工作）

HTML：

 <div class="item_content">
 <h3  class="filmnaam">22 jump street</h3> 
 </div>
 <div class="item_content">
 <h3 class="filmnaam">rio 2</h3>
 </div>

使用Javascript：

function sorting(sortingway) {
  alert(sortingway.value);
  var titelfilms = document.getElementsByClassName("filmnaam");
  var titels = titelfilms.innerHTML;
  console.log(titels[0]);
}

如果没有jQuery，有没有办法做到这一点？

Answer 1

getElementsByClassName返回一个集合，所以循环！

var titelfilms = document.getElementsByClassName("filmnaam");
for (var i = 0; i < titelfilms.length; i++) {
    var titels = titelfilms[i].innerHTML;
    console.log(titels);
}

Answer 2

titelfilms是一个节点列表，您无法获得整个节点列表的innerHTML，它包含对元素的多个引用，每个元素都有自己的属性。

您可以循环并将每个innerHTML连接到变量上，或者您可以map()将返回的元素的innerHTML添加到数组中，然后join()将它们添加到：

＆＃13;

function sorting(sortingway) {
    var titelfilms = document.getElementsByClassName("filmnaam");
    var titels = Array.prototype.map.call(titelfilms, function (el) {
        return el.innerHTML;
    }).join(' ');
    console.log(titels);
}

sorting();

＆＃13;

<div class="item_content">
     <h3 class="filmnaam">22 jump street</h3> 
</div>
<div class="item_content">
     <h3 class="filmnaam">rio 2</h3>
</div>

＆＃13;

使用JavaScript获取元素的连接文本

2 个答案: