未捕获的类型错误：无法读取未定义的属性“包含”

【问题标题】：Uncaught TypeError: Cannot read property 'contains' of undefined未捕获的类型错误：无法读取未定义的属性“包含”
【发布时间】：2019-03-20 17:59:43
【问题描述】：

您好，我喜欢循环遍历所有包含活动类的“幻灯片”项目并获取它们的“data-headertext”属性。我做错了什么？

<div class="slide active"></div>

    var elems = document.getElementsByClassName('slide');

    for (var i = 0, len = elems.length; i < len; i++) {                
        if (elems.classList.contains("active")) {
          myJavascriptFunc
          }
        }

       function myJavascriptFunc() {
         alert(this.getAttribute('data-headertext'));
       }

【问题讨论】：

elems 是一个集合，而不是单个元素......您正在循环它，但您没有引用单个元素。 elems[i] 而你的 myJavascriptFunc 不能与“this”一起使用，this 将是 window

标签： javascript getattribute

【解决方案1】：

您的代码中的elems 是一个没有属性classList 的节点列表。您应该访问 elems 内元素的 classList

if (elems[i].classList.contains("active"))

更简单的方法：

也可以使用querySelectorAll() 给它多个类并使用forEach() 循环

const elems = document.querySelectorAll('.slide.active')
elems.forEach(a => console.log(a.getAttribute('data-headertext')))

在这种情况下，您希望获得data 属性。所以最好使用HTMLElement.dataset `

const elems = document.querySelectorAll('.slide.active')
elems.forEach(a => console.log(a.dataset.headertext));

【讨论】：

但是如何仅从“活动”元素而不是全部获取数据属性？
@Wojciech 你的意思是整个文档中只有一个active element？
是的，只有一个活动的。
@Wojciech 然后使用querySelector('.active').dataset.headertext