2018.4.25李锦浩【连续第197天】
对于传统的HTML而言,HTML5是一个叛逆,所有值钱的版本对JS接口的表述斗不过三言两语,主要篇幅都用于定义标记,与JS相关的荣年内一概都交由DOM规范去定义。
在HTML4在WEB开发领域得到了广泛采用之后,导致了一个很大的变化,即class属性用得越来越多,一方面可以通过它为元素添加样式,另一方面还可以用它表示元素的语义。
因此开发人员适应并增加了对class属性的新认识,HTML5新增了许多API,致力于简化CSS类的用法。
getElementByClassName()方法是最受人欢迎的一个方法,可以通过document对象及所有HTML元素调用该方法。这个方法最早出现在JS库中,是通过既有的DOM功能实现的,而原生的实现具有极大的性能优势,这个方法接受一个参数,一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名的时候,类名的先后顺序不重要。调用这个方法的时候,只有位于调用元素字数中的元素才会返回。在Document对象上调用这个方法是始终返回与类名匹配的所有元素,在元素上调用该方法就只会返回后代元素中匹配的元素。使用这个方法可以更加方便地为带有某些类的元素添加时间处理程序,不必再局限于使用ID或标签名。
ClassList属性,在操作类名的时候,需要通过ClassName添加属性或删除替换。因为ClassName中是一个字符串,所以即使只修改字符串的一部分,也必须每次都设置整个字符串的值。HTML5新增了一种操作类名的方法,可以让操作更加简单也更加安全,那就是为所有元素添加classList属性,这个属性是新集合类型DOMTokenList的实例。与其他DOM集合类似,DOMTokenList有一个表示自己包含多少元素的length属性,而要取得每一个元素可以使用item()方法,也可以使用方括号语法。此外,这个新类型还定义如下方法:
Add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
Contains(value):表示列表中是否存在给定的值,如果存在返回true,否则返回false。
Remove(value):从列表中删除给定的字符串。
Toggle(value):如果列表中已经存在给定的值,删除他,如果没有,添加他。
有了ClassList属性,除非你需要全部删除所有雷鸣,或者完全重写元素的class属性,否则也就用不到className属性了。
明日任务:继续学习JavaScript