0%

DOM扩展

Selectors API

querySelector()

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

1
2
3
4
5
6
7
8
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的静态实例

1
2
3
4
5
6
7
8
9
10
11
//取得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

1
2
3
4
//取得所有类名中包含'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,则删除,如果不存在,添加

1
2
3
4
5
6
div.classList.remove("disabled");
div.classList.add("current");
//检测类名
if(div.classList.contains("bd")&&!div.classList.contains("disabled")){

}

焦点管理

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