DOM 扩展
「Selectors API」
规定了浏览器原生支持的CSS查询API。支持这一特性的所有JavaScript库都会实现一个基本的CSS解析器，然后使用已有的DOM 方法搜索文档并匹配目标节点
querySelector() 和 querySelectorAll() 。在兼容浏览器中， Document 类型 和 Element 类型的实例上都会暴露这两个方法。
我们分别来看下querySelector() 和 querySelectorAll()
- querySelector() 方法:接收CSS选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回 null
// 取得<body>元素
let body = document.querySelector("body");
// 取得ID为"myDiv"的元素
let myDiv = document.querySelector("#myDiv");
// 取得类名为"selected"的第一个元素
let selected = document.querySelector(".selected");
// 取得类名为"button"的图片
let img = document.body.querySelector("img.button");
querySelectorAll() :接收一个用于查询的参数，但它会返回所有匹配的节点，而不止一个这个方法返回的是一个 NodeList 的静态实例。
要注意，有两种写法
// 取得ID为"myDiv"的<div>元素中的所有<em>元素
let ems = document.getElementById("myDiv").querySelectorAll("em");
// 取得所有类名中包含"selected"的元素
let selecteds = document.querySelectorAll(".selected");
// 取得所有是<p>元素子元素的<strong>元素
let strongs = document.querySelectorAll("p strong");
小结：获取某个元素中的子元素按照写法1，获取所有的某种元素，用下面写法，返回的NodeList对象可以通过for-of循环，
css类扩展
- getElementsByClassName() 方法：接收一个参数，即包含一 个或多个类名的字符串，返回类名中包含相应类的元素的NodeList
// 取得所有类名中包含"username"和"current"元素
// 这两个类名的顺序无关紧要
let allCurrentUsernames =
document.getElementsByClassName("username current");
// 取得ID为"myDiv"的元素子树中所有包含"selected"类的元素
let selected =
document.getElementById("myDiv").getElementsByClassName("selected");
但是想要操作类名，使用className实现增删改查会非常不方便，因为className返回的是一个字符串，每次操作都要重新设置，而且要先转换成数组，再编辑， 再转换，很复杂，所以HTML5通过给元素添加classList属性，给这个操作提供了更简单安全的方式，
- classList:
- add(value) ，向类名列表中添加指定的字符串值 value 如果这个值已经存在则什么也不做。
- contains(value) ，返回布尔值，表示给定的 value 是否存在。
- remove(value) ，从类名列表中删除指定的字符串值 value 。
- toggle(value) ，如果类名列表中已经存在指定的 value ，则删除；如果不存在，则添加。
// 删除"disabled"类
div.classList.remove("disabled");
// 添加"current"类
div.classList.add("current");
// 切换"user"类
div.classList.toggle("user");
// 检测类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")) {
// 执行操作
}
// 迭代类名
for (let class of div.classList) {
doStuff(class);
}
readyState:
- document.readyState 属性有两个可能的值：
- loading ，表示文档正在加载；
- complete ，表示文档加载完成
本文使用 mdnice 排版
