jQuery querySelector() 与 querySelectorAll() 方法

querySelector()和querySelectorAll()是两个 jQuery 函数，它们可以通过使用 CSS 选择器(’id’、’class’)帮助将 HTML 元素作为参数传递。

querySelector() 方法： querySelector()方法返回文档中与指定 CSS 选择器匹配的第一个元素。如果出现多个元素，则只返回第一个匹配元素的结果。

句法：

document.querySelector(selectors);

它返回与选择器匹配的第一个元素。

querySelectorAll() 方法： querySelectorAll()方法返回文档中与指定 CSS 选择器匹配的所有元素。它以静态 NodeList 对象的形式返回与选择器匹配的所有元素，该对象是节点的集合。为了访问每个元素，我们通常使用循环。每个元素都可以通过索引访问。索引从 0 开始。 属性长度可用于获取与指定选择器匹配的元素数。

句法：

document.querySelectorAll(selectors);

它返回与选择器匹配的所有元素。

document.querySelectorAll(selectors)[i];

它返回列表中索引 i处的元素。

querySelector() 和 querySelectorAll() 方法的区别：

HTML代码：

HTML

  

  
    
        GeeksforGeeks
    
  
    text
    text
    text
    text
  
    
        querySelector
    
  
    
        querySelectorAll
    
  
    
        function qselector() {
            document.querySelector(".test-btn")
                .style.color = "#006600";
        }
  
        function qselectorall() {
            var x = document
                .querySelectorAll(".test-btn");
  
            for (var i = 0; i < x.length; i++) {
                x[i].style.color = "#006600";
            }
        } 
    

  

输出：

• 在单击任何按钮之前：
• 单击 querySelector 按钮后：
• 单击 querySelectorAll 按钮后：

区别：如上所示， querySelector() 方法只能用于访问单个元素，而querySelectorAll() 方法可用于访问与指定 CSS 选择器匹配的所有元素。要返回所有匹配项，必须使用 querySelectorAll ，而要返回单个匹配项，则使用querySelector。