原生DOM选择器querySelector和querySelectorAll

Posted 2020-10-16 随风行走

在传统的 javascript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

  querySelector

querySelector 和 querySelectorAll 的使用非常的简单，就像标题说到的一样，它和 CSS 的写法完全一样，对于前端开发人员来说，这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV，为了获取到这个元素，你也许会像下面这样：

  document.getElementById("test");

现在我们来试试使用新方法来获取这个 DIV：

  document.querySelector("#test");
  document.querySelectorAll("#test")[0];

获取文档中 class=”example” 的第一个

元素:

  document.querySelector("p.example");

获取文档中有 “target” 属性的第一个 元素：

  document.querySelector("a[target]");

使用这两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover‘)不会得到预期结果。

  querySelectorAll

该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll(‘div.foo‘);//返回所有带foo类样式的div

但需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果，请看下例：

  <div id="container">
      <div></div>
      <div></div>
  </div>

//首先选取页面中id为container的元素

container=document.getElementById(‘#container‘);
console.log(container.childNodes.length)//结果为2

//然后通过代码为其添加一个子元素

  container.appendChild(document.createElement(‘div‘));

//这个元素不但添加到页面了，这里的变量container也自动更新了

console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

  document.querySelector("div.test>p:first-child");
  document.querySelectorAll("div.test>p:first-child")[0];

我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

  var emphasisText = document.querySelectorAll(".emphasis");
  for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
      emphasisText[i].style.fontWeight = "bold";
  }

这是原生方法，比起jquery速度快

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。