《JavaScript高级程序设计》笔记：DOM扩展（十一）

2021-08-04 18:03:28

选择符API

querySelector()方法

// 取得body元素

var tbody = document.querySelector('body');

// 取得ID为"myDIV"的元素

var myDIV = document.querySelector("#myDiv");

// 取得类为"selected"的第一个元素

var selected = document.querySelector(".selected");

// 取得类为"button"的第一个图像元素

var img = document.body.querySelector("img.button");

querySelectorAll()方法

// 取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))

var ems = document.getElementById("myDiv").querySelectorAll("em");

// 取得类为"selected"的所有元素

var selecteds = document.querySelectorAll(".selected");

// 取得所有<p>元素中的所有<strong>元素

var strongs = document.querySelectorAll("p strong");

HTML5

与类相关的扩充

1.getElementsByClassName()方法
该方法可以通过document对象及所有HTML元素调用该方法。

// 取得所有类中包含"username"和"current"的元素。类名的先后顺序无所谓

var allCurrentUsernames = document.getElementsByClassName("username current");

// 取得ID为"myDiv"的元素中带有类名"selected"的所有元素

var selected = document.getElementById("myDiv").getElementsByClassName("selected");

焦点管理

HTML5也添加了辅助管理DOM焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。

var button = document.getElementById("myButton");

button.focus();

alert(document.activeElement === button); // true

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，docuemnt.activeElement的值为null。
另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton");

botton.focus();

alert(document.hasFocus()); // true

码农公寓