选择符API

1、querySlector()方法

querySlector()方法接受一个CSS选择器，返回与该模式匹配的第一个元素。通过Document类型调用querySlector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySlector()方法时，只会在该元素的范围内查找匹配的元素。

1
2
3
4
5
6
7
8
9
10
11
//取得body元素
var body = document.querySelector("body");

//取得ID为“mydiv”的元素
var myDiv = document.querySelector("#mydiv");

//取得类为 "selected"的第一个元素
var selected = document.querySelector(".selected");

//取得button元素的第一个图像
var img = document.body.querySelector("img.button");

2、querySelectorAll()方法

querySelectAll()方法接受的参数与querySelect()方法一样都是一个CSS选择符，但querySelectAll()方法返回的是一个NodeList的实例，不仅仅是一个元素，而是所有匹配到的都会在NodeList中。只要querySelectAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，不管匹配到多少元素，就算是空的，也会返回一个Nodelist。

1
2
//取得所有类为 "selected"的元素
var selected = document.querySelectorAll(".selected");

3、matchesSelector()方法

Element类型新增的一个方法matchesSelector()，接受一个CSS选择符为参数，如果调用元素与该选择符匹配，返回true；否则返回false。

1
2
3
if(document.body.matchesSelctor("body.page1")){
     //true
}

与类相关的扩充

classList属性
为所有元素添加classList属性。它自己有一个表示自己包含多少元素的属性，取得每个元素可以使用item()方法，也可以使用方括号语法。此外还有如下方法：

add(value)：将给定的字符串值添加到列表中，如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在就返回true，否则返回flase。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，则删除它；如果列表中没有给定的值，则添加它。

支持chrome和Firfox 3.6和IE10以上。

1
2
3
4
5
6
7
8
9
10
11
12
13
//向div元素中添加div类
div.classList.add("div")
    //检查div类
div.classList.contains("div")
    //删除div类
div.classList.remove("div")
    // 切换div类
div.classList.toggle("div")

// 迭代类名
for (var i = 0; i < div.classList.length; i++) {
    console.log(div.classList[i]);
}

焦点管理

document.activeElement属性，这个属性始终会引用DOM中当前获得焦点的元素。元素获取焦点的方式有页面加载，用户输入（通常是按Tab键）,和代码汇总调用focus()方法。

默认情况下，文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null。

另外就是新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。

HTMLDocument的变化

1、readyState属性

它有两个可能的值

  • loading，正在加载文档

  • complete，已经加载完文档

    使用document.readyState的最恰当方式，就是通过它来实现一个指示文档已经加载完成的指示器。用法如下：

1
2
3
if(document.readyState =="complete"){
    // 执行操作
}

2、兼容模式

这个属性是为了告诉开发人员浏览器采用的哪种渲染模式。

1
2
3
4
5
if (document.compatMode == "CSS1Compat") {
    alert("Standards mode"); //标准模式
} else {
    alert("Quirks mode") //混杂模式
}

3、head属性
引用文档的\元素，可以结合使用这个属性和另一种后备方法。

1
2
var head = document.head || document.getElementsByTagName("head")[0];
//如果有head属性就使用，否则仍然使用document.getElementsByTatName("head")[0];

字符集属性

charset属性表示文档中实际使用的字符集，也可以直接设置。

1
document.charset

插入标记

1、innerHTML属性

在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素，注释和文本节点）和对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

不是所有的元素都支持innerHTML属性。不支持innerHTML的元素有：\、\、\、\、\、\