HTML5新增方法

H5新增方法

JavaScript操作DOM元素的首要工作是查找对应DOM元素。

考虑到浏览器兼容性，过去常用的方法有如下几个：

（1）.document.getElementById()。

（2）.document.getElementsByName()。

（3）.getElementsByTagName()。

上述三个方法分别通过元素的id属性、name属性或者标签名称获取元素对象或者集合。

虽说利用它们能够基本满足查找DOM元素的需求，但是灵活度很差。

如果能有像CSS选择器类似强大的方法查询DOM元素，开发效率将会得到很大提升。

querySelector方法与querySelectorAll方法满足了上述需求。

虽然当前有一定浏览器兼容问题，但是随着软硬件的更新，它们强大的查询能力将得以展现。

querySelector方法可以返回与选择器匹配的第一个元素。

如果没有匹配到任何元素，返回null。

语法结构

dom.querySelector(selectors) 

selectors   css选择器字符串 比如id="div1" selectors就是"#div1"  如果是class就是".div1"   多个选择器用逗号隔开 IE8以上支持

还可以填 li：last-child   li:first-child 返回最后一个或第一个元素

甚至可以选择属性选择器（属性选择器具体看css）

let li=document.querySelector("li[ant='abc']");

querySelector方法调用者可以是其他dom元素，没必要必须是document

ul1.querySelector("li[ant='abc']"); 搜索ul1中  属性选择器=[ant=abc]的li

 querySelectorAll

方法可以获取与指定选择器匹配的所有元素的集合。

方法跟querySelector一样，只是querySelector返回的是第一个，querySeletorAll返回的是所有元素

classLIst

classList 属性可以获取应用于指定元素上的样式类集合

通过 HTML 元素的 class 属性可以设置样式类

语法结构 element.classList    IE10+支持

<div id="ant" class="a b c">蚂蚁部落</div>

 let odiv=document.getElementById("ant");

  console.log(odiv.classList);

代码分析如下：

（1）.通过class属性为div元素设置了三个样式类。

（2）.classList属性返回一个集合，此集合具有三个元素，分别是class属性设置的三个样式类名。

（3）.集合length属性返回集合元素的数量。

（4）.集合value属性返回元素class属性值。

添加class用法 

odiv.classList.add("d"); 给div元素添加class样式“d”

contains方法

此方法可以判定指定元素是否具有指定名称的class样式表 有返回true 没有返回false

console.log(odiv.classList.contains("c")); 判断有没有class c

item方法

此方法可以获取集合中指定位置class样式类名称

参数是一个位置，表示式样类名称在集合中位置，从0开始计算

console.log(odiv.classList.item(1)); 返回第2个class名称

remove方法

此方法可以删除一个或多个指定样式表

参数是要移除的类名

odiv.classList.remove("a","b");删除div元素的a,b样式表

toggle()

用于切换class样式表的删除与添加

toggle(class, bool)  IE10+支持

参数解析：

（1）.class：必需，class样式类名。

（2）.bool：可选，一个布尔值，规定执行删除操作还是添加操作，如果为true，则执行添加操作，无论是否元素当前是否具有指定的样式类，如果为false，则执行删除操作，无论是否元素具有指定的样式类，如果省略此参数，则执行样式类的添加和删除切换操作。意思是省略后 已经有class值的话第一次点击是删除操作，第二次是添加操作，进行切换

个人总结重点

querySelector(selectors)  selectors的值跟css选择器差不多 只返回第一个

querySelectorAll  返回所有匹配元素集合

classList 获取element的class值  classList.add()添加class值   classList.contains(“指定class值”) 判断有没有指定class值

classList.item(指定位置，从0开始计算) 获取指定位置class样式 

classList.remove() 删除指定样式