需要类和属性的 DOM 选择器答案

【问题标题】：Need DOM selector for class and attribute需要类和属性的 DOM 选择器
【发布时间】：2020-09-17 23:36:11
【问题描述】：

<div class="ag-header-cell ag-header-cell-sortable grid-column-header-forecast" col-id="AD" >

<div class="ag-header-cell ag-header-cell-sortable grid-column-header" col-id="AD" >

我有像上面那样的 div。有些在类名末尾有“预测”，有些则没有。

我想要一个 document.querySelector，它会产生第一个 forecast div 的 col-id 属性。

【问题讨论】：

Attribute selectors - Learn web development | MDN
DOM 选择器选择元素，而不是属性。你可以选择第一个匹配a selector的div（你可能想要一个类选择器和一个属性存在选择器的组合），然后在上面使用getAttribute。

标签： javascript dom css-selectors

【解决方案1】：

如果您有特定的字符串名称，您可以使用@v.kostenko 回答。
但对于更动态的处理，请使用此

document.querySelector('*[class$="forecast"]')

上面的代码将为您提供第一个元素的详细信息，其类包含forecast 字符串，最后，与任何 HTML 元素无关

【讨论】：

【解决方案2】：

const forecast = document.querySelector('div.grid-column-header-forecast');
const colId = forecast.getAttribute('col-id');

【讨论】：