HTML5与相关类的扩充
1、getElementsByclassName()方法
<body>
<div class='a1'>klkx1</div>
<ul id='ul1'>
<li class='a1 a2'>1</li>
<li class='a2 a3'>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class='a1'>klkx2</div>
<script>
var a1 = document.getElementsByClassName('a2 a3');//获取所有 class 同时包括 'a2' 和 'a3' 的元素.
var a2 = document.getElementsByClassName('a1');//
var arr = [].filter.call(a2,function(a){
return a.nodeName === 'LI';
});
arr[0].style.background='red';
a1[0].style.background = 'blue';
</script>
</body>
getElementsByClassName('一个参数') 也可以是类中包含多个元素，类名的先后顺序无所谓
2、classList属性
这个属性属性属于：[object DOMTokenList]
操作类名，需通过className属性添加、删除和替换类名，但是clasName是字符串
即使只修改字符串的一部分，也必须每次都设置整个字符串的值
普通的做法：
<body>
<div class='div1 div2 div3'>klkx<div>
<script>
var oDiv = document.getElementsByTagName('div')[0];
var classNames = oDiv.className.split(/\s+/);//以空格为标记划分为数组
var i,
len = classNames.length;
for (i=0;i<len ;i++ )
{
if (classNames[i] === 'div2')
{
break;
}
}
console.log(i);
classNames.splice(i,1);//删除要删除的项
oDiv.className = classNames.join(' ');//然后再以' '拼接为字符串
</script>
</body>
以上代码是必须的，如果想添加类名，可以用拼接字符串进行添加
但是需要检测，添加的类名是否重复
所以H5新增了一些方法
那就是给所有的元素添加了classList属性
该属性是新集合类型：DOMTokenList的实例，是一个对象，也是一个类数组对象，有length属性
所以该对象也有item()方法也可以使用[]方括号写法
该类型还定义如下方法：
add(value):将给定的字符串值添加到列表中，如果已经存在就不添加了
contains(value)：表示列表中是否存在给定的值，如果存在就返回true，不存在就返回false
remove(value):从列表中删除给定的字符串，无论存在与否，都返回undefined
toggle(value):如果列表中已经存在给定的值，就删除它，如果没有就添加给定的值
HTML5与相关类的扩充的更多相关文章
- List 接口以及实现类和相关类源码分析
List 接口以及实现类和相关类源码分析 List接口分析 接口描述 用户可以对列表进行随机的读取(get),插入(add),删除(remove),修改(set),也可批量增加(addAll),删除( ...
- 【Anroid】9.1 ListView相关类及其适配器
分类:C#.Android.VS2015: 创建日期:2016-02-18 一.简介 列表视图(ListView)是Android应用程序中使用最频繁的UI组件,从无处不在短菜单选项列表到冗长的联系人 ...
- Android随笔之——Android时间、日期相关类和方法
今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...
- 21 BasicTaskScheduler基本任务调度器（一）——Live555源码阅读(一)任务调度相关类
21_BasicTaskScheduler基本任务调度器(一)——Live555源码阅读(一)任务调度相关类 BasicTaskScheduler基本任务调度器 BasicTaskScheduler基 ...
- 8 延时队列相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...
- 4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
- MFC编程入门之十三（对话框：属性页对话框及相关类的介绍）
前面讲了模态对话框和非模态对话框,本节来将一种特殊的对话框--属性页对话框. 属性页对话框的分类 属性页对话框想必大家并不陌生,XP系统中桌面右键点属性,弹出的就是属性页对话框,它通过标签切换各个页面 ...
- android 6.0 SDK中删除HttpClient的相关类的解决方法
一.出现的情况 在eclipse或 android studio开发, 设置android SDK的编译版本为23时,且使用了httpClient相关类的库项目:如android-async-http ...
- Android 6.0删除Apache HttpClient相关类的解决方法
相应的官方文档如下: 上面文档的大致意思是,在Android 6.0(API 23)中,Google已经移除了Apache HttpClient相关的类,推荐使用HttpUrlConnection. ...
随机推荐
- java_12多态
1多态概述 多态是继封装.继承之后,面向对象的第三大特性. 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学生也是人,即出现两种形态. Java作为面向对象的语言,同样 ...
- 在BCH硬分叉后防止重放攻击-2
重放攻击原理和防范措施——如何安全分离BCH的分来源:巴比特018-11-18 16:49:37 热度 12390 第0章 引言 即将面临的比特币分裂,如何保证你的币在分裂后肯定留下两种币?一个重点要 ...
- u-boot之怎么实现分区
启动参数bootcmd=nand read.jffs2 0x30007FC0 kernel; bootm 0x30007FC0中kernel在哪定义,为什么可以直接引用?针对这个问题展开思考最终定位到 ...
- spring/spirng boot添加fluent日志-aop
此项目以aop的形式添加fluent 日志 sample介绍 spring-mvc-aop-helloworld 为spring mvc aop condition toolcommontest 为s ...
- 关系测试# 或 print(s2-s)Python 集合
1集合是一个无序的,不重复的数据组合,它的主要作用如下(set和dict类似,也是一组key的集合,但不存储value.由于key不能重复,所以,在set中,没有重复的key): 去重,把一个列表变成 ...
- LOADRUNNER重装经验
1 装了LR的机器最好不要装UFT,两个工具共用一个配置文件,容易冲突. 2 LR11录制脚本时,支持的浏览器有:IE8及以下版本.FIREFOX,用哪个浏览器录制就要在操作系统中将其设置为默认浏览器 ...
- linux工具介绍
http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/index.html 工具参考篇 1. gdb 调试利器 2. ldd 查看程序依赖库 3 ...
- BZOJ1977或洛谷4180 [BJWC2010]次小生成树
一道LCA+生成树 BZOJ原题链接 洛谷原题链接 细节挺多,我调了半天..累炸.. 回到正题,我们先求出随便一棵最小生成树(设边权和为\(s\)),然后扫描剩下所有边,设扫到的边的两端点为\(x,y ...
- Delphi XE2有什么新功能
具体内容见PDF Delphi XE2有什么新功能Delphi XE2提供(offers)了令人兴奋(exciting)的新功能,让您能够建立高度可视化的,在Windows,Mac和iOS上的业务应用 ...
- Two Sum LT1
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...