DOM扩展

Selectors API

querySelector()

接收CSS选择符参数，返回匹配模式的第一个后代元素，如果没有匹配项则返回null

let body=document.querySelector("body");
//取得id名为myDiv的元素
let myDiv=document.querySelector("#myDiv");
//取得类名为“selector"的第一个元素
let selected=document.querySelector(".selected");
//取得类名为"button"的图片
let img=document.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");
for(let strong of strongs){
    strong.className="important";
    //strong.item(i).className="important";
    //strong[i].className="important";
}

HTML5

getElementsByClassName()

接收一个参数，即包含一个或多个类名的字符串，返回类名中包含相应类的元素的NodeList

//取得所有类名中包含'username'和'current'元素
let allCurrentUsernames=document.getElementsByClassName("username current");
//取得id为“myDiv"的元素子树中所有包含'selected’类的元素
let selected=document.getElementById("myDiv").getElementsByClassName("selected");

这个方法返回以调用它的对象为根元素的子树中所有匹配的元素，在document上调用getElementsByClassName()返回文档中所有匹配的元素，而在特定元素中调用getElementsByClassName()返回该元素后代中匹配的元素

classList属性

• add(value)

• contains(value)

• remove(value)

• toggle(value)：如果类名列表中已经存在指定的value，则删除，如果不存在，添加

div.classList.remove("disabled");
div.classList.add("current");
//检测类名
if(div.classList.contains("bd")&&!div.classList.contains("disabled")){
    
}

焦点管理

let button=document.getElementById("myButton");
button.focus();
console.log(document.activeElement===button);
console.log(document.hasFocus());//true文档已经拥有焦点