HTML5入门之新的选择器

HTML中的新选择器

创新互联建站专注于企业全网营销推广、网站重做改版、独山网站定制设计、自适应品牌网站建设、html5、购物商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为独山等各大城市提供网站开发制作服务。

一．选择器

1. querySelector

2. querySelectorAll

3. getElementsByClassName

1. querySelector的用法

创建一个div

div

然后使用选择器选择ID var oDiv=document.querySelector('#div1')

同样可以选择class var oDiv=document.querySelector('.box')

还有一种方法实用标题选择元素

创建一个div里面有标题

div

选择器选择 var oDiv=document.querySelector('[title=a1]')

！！记住，选择的时候一定要加ID的#或者class的.符号，要不然选择无效

上面的结果为

HTML5入门之新的选择器

QuetySelector的缺点：只能选择一个元素

如果有多个div有同样的类名，只能选择一组中的第一个

2. querySelectorAll的用法（获取一组元素）

创建2个类名相同的div

div1

div2

这个只能选取类名，而上面的2个选择器选择各式各样的，这个就不多啰嗦了，接着往下看

然后选择ID获取元素，然后使用classlist弹出这个元素拥有的class

oDiv.classList.toggle('box2')//toggle方法根据元素是否拥有这个class方法，如果有就执行删除，如果没有就会执行添加