HTML5入门之新的选择器

HTML中的新选择器

一．选择器

1. querySelector

2. querySelectorAll

3. getElementsByClassName

1. querySelector的用法

创建一个div <div id="div1">div</div>

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

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

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

创建一个div 里面有标题 <div title="a1">div</div>

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

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

上面的结果为

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

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

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

创建2个类名相同的div

使用选择器选择

var aDiv=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

var oDiv=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方法，如果有就执行删除，如果没有就会执行添加

本文转自新网学会 51CTO博客，原文链接：http://blog.51cto.com/xwxhvip/2052395 ，如需转载请自行联系原作者

HTML5入门之新的选择器相关推荐

html编程入门指南,给萌新HTML5 入门指南
本文由葡萄城技术团队原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员 ...
给萌新HTML5 入门指南
HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员前端技术也成了必备技能之一,本篇文章的目的是为了帮助萌新的入门指导,也同时希望能为老鸟起到一定查漏补缺的作用,那么让我们开始 ...
html5 基本布局+新标签+新选择器 + 线性渐变
html5 基本布局+新标签 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
html5交互效果,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
html5中的css特性,浅谈HTML5 CSS3的新交互特性
本文标题的这副图片,是用phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
HTML5 入门详解
1. 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定了Web应用开发的一系列标准,成为第一个将Web做为应用开发平台的HTML语言. HTML5定义了一系列 ...
html5 移动页面,html5入门到精通，移动设备的html5页面布局
移动设备的html5页面布局我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. HTML5标准添加的新元素当中,用于 ...

HTML5入门之新的选择器

HTML5入门之新的选择器相关推荐

最新文章

热门文章