html5新增选择器

最新推荐文章于 2023-01-24 12:38:08 发布

aiwu9318

最新推荐文章于 2023-01-24 12:38:08 发布

阅读量140

点赞数

原文链接：http://www.cnblogs.com/moqing/p/5605101.html

版权

分享点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>

转载于:https://www.cnblogs.com/moqing/p/5605101.html

关注