Question

在此示例中，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>

Demo

为什么querySelectorAll在这个基本场景中不起作用？

Answer 1

querySelectorAll返回类似于数组的对象（NodeList），因此您无法设置所有匹配元素的属性（如jQuery）。你必须迭代它们：

var divs = document.querySelectorAll('div');

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

注意：这与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');

为什么不赢得querySelectorAll选择我的所有元素？

1 个答案: