首页 > 建站教程 > JS、jQ、TS >  getElementsByClassName和querySelector区别正文

getElementsByClassName和querySelector区别

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持。
对于现代浏览器开发,还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。

解释:getElementsByClassName()是HTML5的DOM API。
例如:document.getElementsByClassName("wrapper"); //取得DOM中所有class = "wrapper"的元素

解释:querySelector()和querySelectorAll()
是新标准的Selectors API(选择符API)。IE8+、FF3.5+、Safari 3.1+、Chrome、Opera 10+支持

querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素
querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组
例如:document.querySelector("#wrapper") // 取得DOM中第一个id= “wrapper”的元素
例如:document.querySelector(".wrapper") // 取得DOM中第一个class= “wrapper”的元素
例如:document.querySelector("p") // 取得DOM中第一个<p></p>元素
例如:document.querySelectorAll("p") // 取得DOM中所有的<p></p>元素......类比于querySelector()

注:原生的方法,便是getElementById()和getElementsByTagName()。这两个不会有兼容问题