如何使用querySelector选取父ID与子类混合匹配的元素？

嘿，这事儿其实很简单，你可以通过组合选择器的方式，用querySelector精准定位到你要的Col1元素。下面给你几种可行的方法：

方法1：直接组合ID与类选择器 #

你可以把父元素的ID选择器和子元素的多类选择器结合起来，写法如下：

const col1Element = document.querySelector('#dataTableColToggler .toggle-vis.col1');

• #dataTableColToggler：定位到父级div元素
• .toggle-vis.col1：匹配同时拥有toggle-vis和col1类名的子元素（注意两个类选择器之间没有空格，表示元素同时具备这两个类）
• 整体的空格表示“后代元素”关系，即找父元素下符合类条件的子元素

方法2：先获取父元素再查询子元素 #

如果需要多次操作这个父元素下的子节点，先获取父元素再查询会更高效：

// 先拿到父元素
const parentContainer = document.getElementById('dataTableColToggler');
// 在父元素范围内查询目标子元素
const col1Element = parentContainer.querySelector('.toggle-vis.col1');

方法3：利用data属性选择器 #

因为目标元素带有data-column="1"属性，你也可以用属性选择器来定位，这种方式在类名可能变动时更稳定：

const col1Element = document.querySelector('#dataTableColToggler [data-column="1"]');

以上几种方法都能准确获取到你示例中的Col1元素，你可以根据实际场景选择最合适的一种~

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