我想通过单击在控制台中打印一个元素标签

Question

我想通过单击在控制台中打印一个元素标签，但它似乎不起作用，我不明白为什么？

谁能指出我逻辑中的错误？

let bodyChildren = document.body.children;
let bodyArr = Object.values(bodyChildren);

for (i = 0; i < bodyChildren.length; i++) {
    bodyArr[i].onclick = function () {
        console.log(bodyArr[i].tagName);
    };
}

Answer 1

问题在于，当您定义一个函数时，其中的所有内容都包含在一个单独的范围内。在函数 bodyArr 内是未知的。您可以使用 this 来引用被点击的元素，如下所示：

document.body.children 将仅引用 body 元素的直接子元素。如果要引用 DOM 中的每个元素，可以使用 document.getElementsByTagName("*") 代替。

当代码是全局编写时，如下面的代码片段所示，变量 bodyArr 实际上在全局范围内可用，变量 i 也是如此。但请记住，函数内的代码仅在单击元素时执行。在那个时间点，for 循环已经完全执行，留下 i 和值 3（因为在 script 标签下面的代码片段中也很重要）。 bodyArr 总是少包含 1 个元素，无论 DOM 中有多少元素。在这种情况下，它有 3 个元素，最后一个元素保存在数组中的位置 2（从零开始），因此 bodyArr[i] 等于 undefined.

let bodyChildren = document.body.children;
let bodyArr = Object.values(bodyChildren);
for (i = 0; i < bodyChildren.length; i++) {
      bodyArr[i].onclick = function () {
        console.log(this.tagName);
      }
}

<span>child1</span>
<p>child2</p>

Answer 2

您需要从文档正文中获取所有元素，这是关键：var all = document.getElementsByTagName("*");

var all = document.getElementsByTagName("*");
let bodyArr = Object.values(all);

for (i = 0; i < bodyArr.length; i++) {
    bodyArr[i].onclick = function () {
        console.log(this.tagName);
    };
}

<span>Hello world</span>

我想通过单击在控制台中打印一个元素标签

I want to get an element tag printed in the console just by clicking on it

html

javascript

onclick