javascript基础学习系列二百三十八：matches()

matches()方法(在规范草案中称为 matchesSelector())接收一个 CSS 选择符参数，如果元素 匹配则该选择符返回 true，否则返回 false。例如:

 if (document.body.matches("body.page1")){
  // true
}

使用这个方法可以方便地检测某个元素会不会被 querySelector()或 querySelectorAll()方 17 法返回。
所有主流浏览器都支持 matches()。Edge、Chrome、Firefox、Safari 和 Opera 完全支持，IE9~11 及一些移动浏览器支持带前缀的方法。

元素遍历

IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会。这样就导致了 childNodes
和 firstChild 等属性上的差异。为了弥补这个差异，同时不影响 DOM 规范，W3C 通过新的 Element Traversal 规范定义了一组新属性。 20
Element Traversal API 为 DOM 元素添加了 5 个属性:
 childElementCount，返回子元素数量(不包含文本节点和注释);
 firstElementChild，指向第一个 Element 类型的子元素(Element 版 firstChild); 21  lastElementChild，指向最后一个 Element 类型的子元素(Element 版 lastChild); previousElementSibling， 指 向 前 一 个 Element 类 型 的 同 胞 元 素 (Element 版
previousSibling);
 nextElementSibling，指向后一个 Element 类型的同胞元素(Element 版 nextSibling)。 在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就
不用担心空白文本节点的问题了。
举个例子，过去要以跨浏览器方式遍历特定元素的所有子元素，代码大致是这样写的:

   let parentElement = document.getElementById('parent');
    let currentChildNode = parentElement.firstChild;
// 没有子元素，firstChild 返回 null，跳过循环 while (currentChildNode) {
  if (currentChildNode.nodeType === 1) { 25 // 如果有元素节点，则做相应处理
processChild(currentChildNode);
  }
  if (currentChildNode === parentElement.lastChild) {
break; }
  currentChildNode = currentChildNode.nextSibling;
}

使用 Element Traversal 属性之后，以上代码可以简化如下:

let parentElement = document.getElementById('parent');
let currentChildElement = parentElement.firstElementChild;
 // 没有子元素，firstElementChild 返回 null，跳过循环 while (currentChildElement) {
// 这就是元素节点，做相应处理
processChild(currentChildElement);
if (currentChildElement === parentElement.lastElementChild) {
break; }
currentChildElement = currentChildElement.nextElementSibling; }

IE9 及以上版本，以及所有现代浏览器都支持 Element Traversal 属性。