HTML5 – 新增 javascript 操作

querySelector

querySelector 是一个新的取得 dom 元素的方法，它可以使用元素的《标签》、《class类》、《id值》等等来获得单个 dom 元素

使用方法

<ul>
  <li>行一</li>
  <li class="li2">行二</li>
  <li id="li3">行三</li>
</ul>

document.querySelector("li") = <li>行一</li>
document.querySelector(".li2") = <li class="li2">行二</li>
document.querySelector("#li3") = <li id="li3">行三</li>

querySelector 会从头开始适配对应的元素，在找对适配元素后马上返回这个元素，且只返回这一个元素，后面合适的元素将不再进行适配。

querySelectorAll

querySelectorAll 是 querySelector 的全搜索函数，它和 querySelector 一样，但 querySelectorAll 会把所有合适的元素都适配进来，并以数组的方式返回。

classList

Html5 支持增删改元素的 class 样式类

add() 增加

往元素中增加类样式

document.querySelector("li").classList.add('red')
往找到的第一个 li 中增加一个名为 red 的类样式

注意：add() 每次只能增加一个，不支持使用 add("red underline") 这样复合样式名

remove() 删除

往元素中删除类样式

document.querySelector("li").classList.remove('red')
往找到的第一个 li 中删除一个名为 red 的类样式

toggle() 开关

检查元素中是否包含某个样式，如有则删，如无则加

document.querySelector("li").classList.toggle('red')
检查元素中是否有 red 这个样式，如果有则把 red 样式删除，如果没有，则添加 red 样式

contains() 包含

检测元素中是否包含某个样式

document.querySelector("li").classList.contains('red')
检查元素中是否包含 red 这个样式，如果有返回 true 如果没有返回 false