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与相关类的扩充的更多相关文章

  1. List 接口以及实现类和相关类源码分析

    List 接口以及实现类和相关类源码分析 List接口分析 接口描述 用户可以对列表进行随机的读取(get),插入(add),删除(remove),修改(set),也可批量增加(addAll),删除( ...

  2. 【Anroid】9.1 ListView相关类及其适配器

    分类:C#.Android.VS2015: 创建日期:2016-02-18 一.简介 列表视图(ListView)是Android应用程序中使用最频繁的UI组件,从无处不在短菜单选项列表到冗长的联系人 ...

  3. Android随笔之——Android时间、日期相关类和方法

    今天要讲的是Android里关于时间.日期相关类和方法.在Android中,跟时间.日期有关的类主要有Time.Calendar.Date三个类.而与日期格式化输出有关的DateFormat和Simp ...

  4. 21 BasicTaskScheduler基本任务调度器（一）——Live555源码阅读(一)任务调度相关类

    21_BasicTaskScheduler基本任务调度器(一)——Live555源码阅读(一)任务调度相关类 BasicTaskScheduler基本任务调度器 BasicTaskScheduler基 ...

  5. 8 延时队列相关类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...

  6. 4 Handler相关类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述 处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...

  7. MFC编程入门之十三（对话框：属性页对话框及相关类的介绍）

    前面讲了模态对话框和非模态对话框,本节来将一种特殊的对话框--属性页对话框. 属性页对话框的分类 属性页对话框想必大家并不陌生,XP系统中桌面右键点属性,弹出的就是属性页对话框,它通过标签切换各个页面 ...

  8. android 6.0 SDK中删除HttpClient的相关类的解决方法

    一.出现的情况 在eclipse或 android studio开发, 设置android SDK的编译版本为23时,且使用了httpClient相关类的库项目:如android-async-http ...

  9. Android 6.0删除Apache HttpClient相关类的解决方法

    相应的官方文档如下: 上面文档的大致意思是,在Android 6.0(API 23)中,Google已经移除了Apache HttpClient相关的类,推荐使用HttpUrlConnection. ...

随机推荐

  1. exercise 1-6

    [买菜] package Practice06; import java.io.File; import java.io.FileNotFoundException; import java.util ...

  2. tomcat-maven-plugin的使用

    maven有一个把web应用部署到tomcat下的插件 tomcat-maven-plugin , 我们可以使用这个插件把web应用一键式的部署到一个远程的tomcat中. 插件的url: http: ...

  3. android的Afinal框架下的数据库更新

    项目需要,版本升级时给表添加了一些新的字段,发现出现异常. 解决方法:监听数据库的版本号,更新数据库. 创建FinalDb对象时使用如下的构造函数,监听版本号的变化: db = FinalDb.cre ...

  4. coding利用Webhook实现Push代码后的jenkins自动构建

    安装jenkins 篇:http://www.cnblogs.com/loveyouyou616/p/8714544.html 之前部署了持续集成工具jenkins.通常是开发后的代码先推到 远程代码 ...

  5. 线特征---LineMatching代码运行（五）

    [1]    https://github.com/dlut-dimt/LineMatching The code is based on Matlab.  https://github.com/ka ...

  6. go语言中的数组

    package main; import ( "fmt" ) func main() { //声明一个数组 var a [3]int; a = [3]int{1, 2, 3}; / ...

  7. stark组件开发之提取公共视图函数

     路由问题, 已经解决! 然后就是视图函数的问题了: 不想重复写的解决途径就是, python  类的继承了! 写一个基类, 基类定义 增删改查. 然后其他的,全部去继承他! from django. ...

  8. 无法连接到localhost.其他信息：用户“sa”登录失败。（MicroSoft Sql Server,错误：18456）

    18456错误: 在安装的时候如果选择的身份验证模式为:Window身份验证模式,就会出现18456的错误. 解决方案: 使用windows身份验证登录之后,在下面红框上单击右键,点击属性: 点击属性 ...

  9. [z]Linux下压缩与解压

    1.压缩命令: 命令格式:tar  -zcvf   压缩文件名.tar.gz   被压缩文件名 可先切换到当前目录下.压缩文件名和被压缩文件名都可加入路径. 2.解压缩命令: 命令格式:tar  -z ...

  10. 点评10款Github上最火爆的国产开源项目

    衡量一个开源产品好不好,看看产品在Github的Star数量就知道了.由此可见,Github已经沦落为开源产品的“大众点评”了. 一个开源产品希望快速的被开发者知道.快速的获取反馈,放到Github上 ...