分享点html5的学习笔记,比较基础,突然发现通过写博客来记笔记有很多优点呢,平常记得笔记比较简单,复习起来比较吃力,看自己的博客理解起来还比较轻松,而且只有真正理解了才能表达清楚让别人看懂,还锻炼语言表达能力呢,所以有条件就多写点东西吧

选择器

1 querySelector(如果是一组元素,只能获取到一组中的第一个元素)

 document.querySelector("#div1");

 document.querySelector(".div1");

 document.querySelector("[title=hello]");

2  querySelectorAll (可以获取一组元素,不过不能直接给所有元素设置样式,得用循环)

document.querySelectorAll(".box");

3 getElementsByClassName(只针对class,相见恨晚的选择器)

document.getElementsByClassName('box')

html5提供了class列表属性以及操作class的方法

classList  :得到的是所在节点的所有class     返回类似数组的对象类型

length :  class的长度

add()  :  添加class方法

remove()  :  删除class方法

toggle() :  切换class方法      toggle("a")  如果列表中存在a 就执行删除操作,不存在就执行添加操作

 var oDiv =  document.querySelector("#div1");
 oDiv.classList.length // 3
 oDiv.classList.add("div0")//增加class  其他用法大致相同
 <div class="div1 div2 div3" id="div1"></div>

html5新增选择器的更多相关文章

  1. 深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法

    前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...

  2. 7-80 HTML5新增的JS选择器

    7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...

  3. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  5. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. html5新增及删除标签

    一.新增标签 有一种划分为,功能性标签[html5新增,如canvas,旧浏览器没有]和语义性标签[如header等只是增强语义,没有新功能].下面按照分几个小类来说. 1.结构标签 新增的结构标签, ...

  7. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  8. 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

    今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. 这些 ...

  9. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

随机推荐

  1. BIG biang教你误删oracle 怎么办,

    今天无意中在网上看到了关于oracle误删除数据恢复的一条信息,发现的确很好使,下面就我的测试向大家汇报下. 1. select * from t_viradsl2 t         //查询t_v ...

  2. JavaScript吸顶灯的实现

    吸顶灯是各站点常用的一个功能,它有两个特性 向下滚动到div位置时,该div一直固定在页面的顶部 向上滚动到div原有位置时,div又恢复到文档中的原位置 div可能是一个“分类菜单”,也可能是一个“ ...

  3. Android之TelephonyManager类的方法详解

    TelephonyManager类主要提供了一系列用于访问与手机通讯相关的状态和信息的get方法.其中包括手机SIM的状态和信息.电信网络的状态及手机用户的信息.在应用程序中可以使用这些get方法获取 ...

  4. 如何快速开发出一个高质量的APP——创业谈

    [起] 今早,一个技术群里有人想快速做出一个app,然后询问技术方案,大概是这样, 拿到了200w投资,期望花20w两个月先做出一个app,包括iOS,Android, 先,呵呵,一下, 大概预估了一 ...

  5. Django WSGI Error:class.__dict__ not accessible in restricted mode

    一.问题 今天网站出了一个错误: RuntimeError at /index.html class.__dict__ not accessible in restricted mode 二.原因 用 ...

  6. 广搜+打表 POJ 1426 Find The Multiple

    POJ 1426   Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 25734   Ac ...

  7. 实习小记-python中不可哈希对象设置为可哈希对象

    在这篇之前,我又专门翻译过官方python3.3的可哈希对象文档,大家可以先参考一下: 实习小记-python中可哈希对象是个啥?what is hashable object in python? ...

  8. Floyd判最小环算法模板

    算法思想:如果存在最小环,会在编号最大的点u更新最短路径前找到这个环,发现的方法是,更新最短路径前,遍历i,j点对,一定会发现某对i到j的最短路径长度dis[i][j]+mp[j][u]+mp[u][ ...

  9. 上传图片shell绕过过滤的方法

    一般网站图片上传功能都对文件进行过滤,防止webshelll写入.但不同的程序对过滤也不一样,如何突破过滤继续上传? 本文总结了七种方法,可以突破! .文件头+GIF89a法.(php)//这个很好理 ...

  10. 用yo命令创建项目

    1,npm install -g yo 安装yeoman 2,npm install -g generator-webapp 安装项目脚手架(生成器) 如果安装angular的项目后面则是genera ...