今天碰到问题,用了下不经常用的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不支持。