获取含forecast类的首个div的col-id属性的DOM选择器需求

嘿，这事儿很简单，用document.querySelector配合合适的CSS选择器就能轻松搞定，我给你两种靠谱的实现方式：

方法一：精准匹配目标类名 #

如果你的目标元素明确带有grid-column-header-forecast这个类，直接用这个类选择器定位最稳妥：

// 找到第一个带有grid-column-header-forecast类的div
const firstForecastDiv = document.querySelector('div.grid-column-header-forecast');
// 获取它的col-id属性值
const colId = firstForecastDiv?.getAttribute('col-id');

// 打印结果
console.log(colId);

方法二：匹配类名末尾为forecast的元素 #

如果需要更灵活的匹配（比如类名是xxx-forecast这类形式的都要抓取），可以用CSS属性选择器的$=语法，匹配类名以forecast结尾的元素：

// 找到第一个类名末尾是forecast的div
const firstForecastDiv = document.querySelector('div[class$="forecast"]');
const colId = firstForecastDiv?.getAttribute('col-id');

console.log(colId);

小提示 #

• document.querySelector只会返回匹配到的第一个元素，完美契合你要找首个元素的需求；
• 用?.可选链操作符是为了避免找不到目标元素时抛出错误，如果页面肯定存在该元素，也可以直接去掉它；
• getAttribute('col-id')是获取元素自定义属性值的标准写法，完全适配你的场景。

内容的提问来源于stack exchange，提问作者Steven Greenbaum