📜  jQuery querySelector() 与 querySelectorAll() 方法

📅  最后修改于: 2021-09-01 03:39:42             🧑  作者: Mango

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 按钮后:

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