时间戳

首页 > 解决方案 > for 循环内的 JS DOM 不能使用字符串

javascript - for 循环内的 JS DOM 不能使用字符串

问题描述

这是HTML：

<ul class="drum">
 <li>A</li>
 <li>S</li>
 <li>D</li>
</ul>

这是JS：

const Olist = document.querySelectorAll('.drum li');
  for(let i = 0; i < Olist.length; i++){
    Olist[i].addEventListener('click', function(e){
        console.log(`I was clicked ${Olist[i]}`);
    })
 }

我在循环中的 console.log() 返回以下内容：I was clicked [object HTMLLIElement]我不明白为什么我得到了[HTMLLIElement]而不是实际的li

编辑 我试图理解为什么我没有得到与简单时相同的结果console.log(Olist[i])。我过去曾多次这样做，但我认为这里缺少一些基本的东西。

标签： javascriptdom

解决方案

您获得该值是因为正在I was clicked ${Olist[i]}调用实例。如果您想查看元素的 HTML，请尝试调用..toString()HTMLLIElementI was clicked ${Olist[i].outerHTML}

const Olist = document.querySelectorAll('.drum li');


for (let i = 0; i < Olist.length; i++) {
  Olist[i].addEventListener('click', function(e) {
    console.log(`I was clicked ${Olist[i].outerHTML}`);
    console.log(`Olist[i].toString() => ${Olist[i].toString()}`);
  })
}
<ul class="drum">
  <li>A</li>
  <li>S</li>
  <li>D</li>
</ul>

推荐阅读