Chrome扩展开发：如何用JavaScript获取元素的id属性值

嘿，我来帮你搞定这个问题！你已经知道用getElementsByClassName()获取class为annonce的元素了，其实拿到它的id属性真的超简单，下面给你几种靠谱的实现方式：

方法1：直接访问元素的id属性 #

getElementsByClassName()返回的是一个HTMLCollection（类数组对象），所以你需要先定位到目标元素（比如第一个匹配的元素），然后直接访问它的id属性就行：

// 获取所有class为annonce的元素集合
const annonceElements = document.getElementsByClassName('annonce');
// 取第一个匹配的元素（对应你目标的<div class="annonce" id="45673">）
const targetElement = annonceElements[0];
// 直接获取id属性值
const elementId = targetElement.id;
console.log(elementId); // 输出：45673

方法2：使用getAttribute('id')方法 #

除了直接访问属性，你也可以用元素的getAttribute()方法来获取id，效果完全一致：

const elementId = targetElement.getAttribute('id');
console.log(elementId); // 同样输出：45673

更简洁的写法：用querySelector() #

如果你的页面里只有一个class为annonce的元素，用querySelector()会更省事，它直接返回第一个匹配的元素，不用处理集合：

const targetElement = document.querySelector('.annonce');
if (targetElement) { // 先判断元素是否存在，避免报错
  const elementId = targetElement.id;
  console.log(elementId);
} else {
  console.log("没找到class为annonce的元素哦");
}

小提醒：如果页面中有多个class为annonce的元素，getElementsByClassName()会返回所有匹配的元素，这时候你需要根据实际情况选择对应的索引（比如annonceElements[1]取第二个）。

内容的提问来源于stack exchange，提问作者kadri.r