DOM扩展

两个方法：

1. Selectors API(选择器API)
2. HTML5

选择符API

Selectors API :让浏览器支持原生的CSS查询。

1.querySelector()

Level1 中 接受一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到返回null。
可以通过Document、Element访问

2.querySelectorAll()

Level1中 接受一个CSS选择符，返回与该模式匹配的所有元素，一个NodeList实例，如果没有找到返回null。

底层类似于一组元素的快照。
可以使用item()或者方括号

可以通过Document、Element访问

matchesSelector()方法

Level 2 中新增的
接受一个CSS选择符，如果调用元素与该元素匹配，返回true，否则，返回false。

元素遍历

Element Traversal API为DOM元素添加了一下5个属性：
可以不用担心空白节点。

1. childElementCount
2. firstElementChild
3. lastElementChild
4. previousElementSibling
5. nextEementSibling

HTML5

getElementsByClassName()

接受一个包含多个类名的字符串，返回带有指定类的所有元素的NodeList。类名的先后顺序不重要。

classList属性

在操作类名是，需要通过className属性添加、删除和替换类型。

是新集合类型DOMTokenList的实例。

方法：
add(value)
contains(value)
remove(value)
toggle(value)

焦点管理

document.activeElement属性始终保存DOM中当前焦点的元素。

document.hasDocus()方法用于确定文档是否获取了焦点。

HTMLDocuement的变化

1. readyState属性–>实现一个文档是否已经加载完毕

   • loading：正则加载文档
   • complete：已经加载完文档

2. 兼容模式 compatMode属性 告诉开发人员浏览器使用了哪种渲染模式。

   • CSS1Compat：标准模式
   • BackCompat：混杂模式

3. head属性

   • 引用head元素

     字符集属性

4. charset属性：表示文档中实际使用的字符集，也可以用来定义新字符集
5. defaultCharset：表示根据默认浏览器即操作系统的设计，当前文档默认的字符集属性是什么。

自动以数据属性

1. 要加前缀data-
2. 通过dataset属性来访问自定义属性的值。
3. dataset属性是DOMStringMap的一个实例。名值对。

插入标记

innerHTML属性

outerHTML属性

insertAdjacentHTML()方法

第一个元素：
beforebegin
afterbegin
beforeend
afterend

内存与性能问题

scrollIntoView()方法

在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。

专有扩展