如何用JS选中aria-label为Chart的容器内带aria-labelledby属性的元素

实现方法 #

可以实现，直接使用组合属性选择器即可一步完成匹配，比你当前的遍历写法更简洁、稳定性更高。

你当前的写法依赖固定的DOM层级关系（nextSibling、childNodes[0]），只要DOM结构稍有调整就会失效，不推荐使用。

最优实现代码

// 直接获取aria-label="Chart"容器下所有带aria-labelledby属性的后代元素
const matchedEls = document.querySelectorAll('[aria-label="Chart"] [aria-labelledby]');

// 直接遍历使用即可，不需要额外判断属性
matchedEls.forEach(el => {
  console.log(el);
  // 此处可添加你的业务逻辑
});

规则说明

• 选择器中[aria-label="Chart"]负责定位外层容器，限定匹配范围
• 两个选择器中间的空格代表匹配外层容器的所有后代元素
• 末尾的[aria-labelledby]负责筛选出带有对应属性的元素
  如果只需要匹配容器的直接子元素，可以把空格替换为>，选择器写为[aria-label="Chart"] > [aria-labelledby]即可

内容的提问来源于stack exchange，提问作者Sara Ree