document自带的强大的选择器querySelector/querySelectorAll

我们用原生document的时候往往使用 document.getElementById 这种依靠class ,Id ,标签名 ,来获得想找到的节点。

这在逻辑结构比较简单的时候还是不错的选择，可是当结构层级复杂事，就不是那么好用了。

这个时候 我们就可以使用 document提供的另外一个强大的方法,querySelector/querySelectorAll ,这个方法支持css的样式写法

eg:

document.querySelector("div.test>p:first-child");

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


现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。

再举个例子:我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

var emphasisText = document.querySelectorAll(".emphasis");

for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){

 emphasisText[i].style.fontWeight = "bold";

}

后附一些刚才发现的css写法

     (1)通配符：

      id属性以code开始的所有input标签  :  document.querySelectorAll("input[id^='code']");

       id属性以code结束的所有input标签 : document.querySelectorAll("input[id$='code']");

       id属性包含code的所有input标签 :document.querySelectorAll("input[id*='code']");

   (2)根据索引选择

       选择索引为偶数的所有tr标签: document.querySelectorAll("tbody tr:even");

       选择索引为奇数的所有tr标签: document.querySelectorAll("tbody tr:odd");