为什么querySelectorAll不选择我所有的元素?

Why won't querySelectorAll select all of my elements?

本文关键字：元素 querySelectorAll 选择我 为什么      更新时间：2023-09-26

在本例中，querySelectorAll选择td元素2到4:

document.querySelectorAll("td + td");
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

那么，它将选择所有大于等于2的td元素

但是在下面的示例中，当我使用:

时，'div'没有选择我的div元素:
document.querySelectorAll('div').style.color = 'red';
<div>foo</div>
<div>bar</div>

演示

为什么querySelectorAll不能在这个基本场景中工作?

querySelectorAll返回一个类似数组的对象(NodeList)，所以你不能像那样设置所有匹配元素的属性(像jQuery一样)。你必须遍历它们:

var divs = document.querySelectorAll('div');
for(var i=0; i<divs.length; i++){
    divs[i].style.color = "red";
}

注意:这与querySelector不同，querySelector总是返回单个元素。

你可以这样写一个辅助函数:

function qsa(selector, styleProperty, value){
    var divs = document.querySelectorAll('div');
    for(var i=0; i<divs.length; i++){
        divs[i].style[styleProperty] = value;
    }
    return divs;
}

用法:

var divs = qsa('div', 'color', 'red');

相关文章：