强大DOM选择器querySelector

时间:2023-03-08 17:15:52

今天碰到问题,用了下不经常用的querySelector还不错

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

document.getElementById("test");

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

document.querySelector("#test");

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

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

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

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

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

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

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

 }

缺点:这是原生方法,比起jquery速度快,缺点是IE6、7不支持。