时间戳

首页 > 解决方案 > addEventListener 是否适用于按标签名称获取元素？

javascript - addEventListener 是否适用于按标签名称获取元素？

问题描述

我正在尝试更改 h1 的颜色，但是当我使用 getElementsByTagName 和 addEventListener 时，它没有执行，但它可以使用 getElementById 为什么？

document.getElementsByTagName("site-title-heading").addEventListener("click",abc);

function abc(){
    document.getElementsByTagName("site-title-heading").style.color="yellow"

}

document.getElementById("site-title-heading").addEventListener("click",abc);

function abc(){
    document.getElementById("site-title-heading").style.color="yellow"

}

标签： javascript

解决方案

每当事情不起作用时，将它们记录到控制台。

注意：addEventListener方法存在于 HTML 元素上。

getElementsByTagName返回 HTML 元素的 NodeList（类似于数组的数据结构），而getElementById返回一个 HTML 元素。

因此，您可以做的是遍历所有元素并将侦听器分配给每个元素。

const elements = document.getElementsByTagName("site-title-heading");

for (const el of Array.from(elements)) {
    el.addEventListener("click",abc);
}

推荐阅读