如何通过整数数组筛选含指定data-id属性的表格行DOM元素？

云上老周

2026-7-24

高效选择指定data-id属性值的表格行

我有一个数组：[ 2, 5, 6, 8, 9 ]，需要选择所有带有data-id=n属性且属性值在这个数组里的表格行，请问最高效的实现方式是什么？

我曾想过能不能这么写：

let rows = document.querySelector("#table tr data-id=[ 2, 5, 6, 8, 9 ]");

要是能这么写就太方便了！

目前我临时写了这段代码：

...
for ( const key in flags ) {
    let arr = flags[ key ].records;

    arr.forEach( id => {
        let row = autotable.querySelector('.autotable-row[data-id="' + id + '"] td.' + key);

        if ( row ) {
            row.classList.add(flags[ key ].flag);
        }
    });
}
...

最高效的实现方式

直接用多属性选择器组合一次性匹配所有目标元素，避免循环多次查询DOM，这比你现在的写法高效得多：

const targetIds = [2, 5, 6, 8, 9];
// 把数组转成CSS选择器字符串，格式是[data-id="2"], [data-id="5"], ...
const rowSelector = `#table tr[data-id="${targetIds.join('"], [data-id="')}"]`;
// 一次性获取所有符合条件的行
const targetRows = document.querySelectorAll(rowSelector);

针对你代码里处理flags的场景，可以进一步优化，把每个key对应的所有目标单元格一次性查到，再批量添加类名：

for (const key in flags) {
    const { records, flag } = flags[key];
    // 直接生成包含所有目标id的td选择器
    const cellSelector = `.autotable-row[data-id="${records.join('"], [data-id="')}"] td.${key}`;
    // 一次性获取所有目标单元格
    const targetCells = autotable.querySelectorAll(cellSelector);
    // 批量加类名，不用逐个判断存在性——querySelectorAll返回空集合时，forEach不会执行
    targetCells.forEach(cell => cell.classList.add(flag));
}