阿坝州网站建设公司

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

使用选择器选择

varaDiv=document.querySelectorAll('.box')

使用事件测试 是否选择了多个元素

alert(aDiv.length)

 

弹出结果为2

HTML5入门之新的选择器

 

 

 

 

3.getElementsByClassName

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

 

 

 

 

 

 

 

二．获取class列表属性

classlist

1.     length获取class长度

2.     add（）添加class方法

3.     remover（）删除class方法

4.     toggle（）根据

 

 

 

 

先创建一个div ，其中含有ID和类

div1

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

varoDiv=document.getElementById('div1')

alert(oDiv.classList)

alert(typeof oDiv.classList)//弹出一个类似与数组的对象

结果为

HTML5入门之新的选择器

 

 

 

然后测试classlist的方法

oDiv.classList.add('box4')//添加一个class方法

oDiv.classList.add('box2')//删除一个class方法

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


网站标题：HTML5入门之新的选择器
标题来源：http://azwzsj.com/article/gjoiss.html

其他资讯