扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
HTML中的新选择器
创新互联建站专注于企业全网营销推广、网站重做改版、独山网站定制设计、自适应品牌网站建设、html5、购物商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为独山等各大城市提供网站开发制作服务。
一．选择器
1. querySelector
2. querySelectorAll
3. getElementsByClassName
1. querySelector的用法
创建一个div
然后使用选择器选择ID var oDiv=document.querySelector('#div1')
同样可以选择class var oDiv=document.querySelector('.box')
还有一种方法实用标题选择元素
创建一个div里面有标题
选择器选择 var oDiv=document.querySelector('[title=a1]')
！！记住，选择的时候一定要加ID的#或者class的.符号，要不然选择无效
上面的结果为
QuetySelector的缺点：只能选择一个元素
如果有多个div有同样的类名，只能选择一组中的第一个
2. querySelectorAll的用法（获取一组元素）
创建2个类名相同的div
使用选择器选择
varaDiv=document.querySelectorAll('.box')
使用事件测试 是否选择了多个元素
alert(aDiv.length)
弹出结果为2
3.getElementsByClassName
这个只能选取类名，而上面的2个选择器选择各式各样的，这个就不多啰嗦了，接着往下看
二．获取class列表属性
classlist
1. length获取class长度
2. add（）添加class方法
3. remover（）删除class方法
4. toggle（）根据
先创建一个div ，其中含有ID和类
然后选择ID获取元素，然后使用classlist弹出这个元素拥有的class
varoDiv=document.getElementById('div1')
alert(oDiv.classList)
alert(typeof oDiv.classList)//弹出一个类似与数组的对象
结果为
然后测试classlist的方法
oDiv.classList.add('box4')//添加一个class方法
oDiv.classList.add('box2')//删除一个class方法
oDiv.classList.toggle('box2')//toggle方法根据元素是否拥有这个class方法，如果有就执行删除，如果没有就会执行添加
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网