DOM扩展学习记录

主要记录以下书中的选择API和部分HTMl5的扩展。

选择符API

这里的选择符api,主要指得是querySelector() 和 querySelectorAll() 这两个方法

querySelector()

querySelector 方法接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到，则返回null.

• 输入元素名

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

• 输入ID, “#id”

var myDiv = document.querySelector('#myDiv')

• 输入类名, ‘.class’

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

取得的是类为‘selected’的第一个元素。

在通过Document类型调用querySelector()方法时，会在文档元素的范围内查找匹配元素。当通过Element类型调用时，只会在该元素后代元素中查找匹配的元素，不包括自身。

querySelectorAll()

接受的参数和querySelector()方法的参数一样，但返回的是一个NodeList, 带有所有属性和方法。但底层实现是类似于一组元素的快照，而非对文档不断扫描。

元素遍历

Element Traversal API 为DOM元素添加了以下五个属性

属性	说明
childElementCount	返回子元素（不包含文本节点和注释）的个数
firstElementChild	指向第一个元素；firstChild的元素版
lastElementChild	指向最后一个元素；lastChild 的元素版
previousElementSibling	指向前一个同辈元素；previousSibling的元素版
nextElementSibling	指向后一个同辈元素；nextSibling的元素版

HTML5

与类相关

• getElementsByClassName()方法
• classList属性
  classList属性是新集合类型DOMTokenList的实例，与其他DOM集合类似，可以使用方括号语法，想要获取每个元素可以使用item()方法，拥有length属性。同时还定义了以下方法
• add(value)：添加一个类，如果存在则不添加了
• contains(value):表示是否存在给定值
• remove(value):移除给定的类
• toggle(value): 如果存在则删除，如果不存在则添加

焦点管理

HTML 中添加了documen.activeElement属性，这个属性会始终指向DOM中获得焦点的元素。

参考：

《JavaScript高级程序设计》