11. javacript高级程序设计-DOM扩展

1. DOM扩展

1.1 选择符API

l querySelector()

接收一个css选择符，返回与该模式匹配的第一个元素

l querySelectorAll()

接收一个css选择符，返回所有匹配的NodeList元素

1.2 HTML5

1.2.1 与类相关的扩充

l getElementsByClassName()

接收一个参数，一个包含一或者多个类名的字符串，返回带有指定类的所有元素的NodeList

l classList属性，add(value),contains(value),remove(value),toggle(value)

classList获取元素的所有类属性，并通过对应的方法操作对应的类

1.2.2 焦点管理

document.activeElement属性指向当前文档中获得焦点的元素

document.hasFocus()判断当前文档是否获取了焦点

1.2.3 HTMLDocument变化

l readyState属性：

loading:正在加载文档

complete:已经加载完文档

l 兼容模式

标准模式：document.compatMode == “CSS1Compat”

混杂模式：document.compatMode == “BackCompat”

l head属性

var head = document.head || document.getElementsByTagName(“head”)[0];

1.2.4 字符集属性

document.charset 表示当前文档中使用的字符集

1.2.5 自定义属性

HTML5可以为元素添加非标准属性，但要添加前缀data-

 

获取设置appId自定义属性

var appId = div.dataset.appId;

div.dataset.appId = 23456;

 

 

1.2.6 插入标记

l innerHtml：返回当前元素所有子节点对应的HTML标记

l outerHtml：返回当前元素以及对应的所有子元素的HTML标记

1.2.7 scrollIntoView

scrollIntoView()可以在所有的html元素上调用，通过滚动浏览器窗口或者每个容器元素，调用元素就可以出现在视口中。