一、DOM扩展概述
1.1、DOM的两个主要扩展
Selectors API(选择符API)
HTML5
1.2、Element Traversal(元素遍历)规范
1.3、专有扩展
二、HTML5
2.1、与类相关的扩充
2.1.1、getElementsByClassName()方法
参数:接收一个参数,即一个包含一或多个类名的字符串
返回值:返回带有指定类的所有元素的NodeList
【注意】
传入多个类名时,其先后顺序无关紧要
可以通过document对象及所有HTML元素调用该方法
【举例】
2.1.2、classList属性
在操作类名时,需要通过className属性添加、删除和替换类型,须记住,className中是一个字符串,所以即使只修改字符串的一部分,也必须每次都设置整个字符串的值。
对于以上的方法虽然完成了想做的工作,但是就其繁简程度而言,不如接下来将来介绍的方法。HTML5新增了一种操作类名的方式,即为所有元素添加classList属性,该属性是新集合类型DOMTokenList的实例。在该集合中,如若需要取得每个元素可以使用item()方法,当然,也可以使用方括号语法。对于这个新类型,还可以进行如下操作:
2.1.2.1、add(value)
将给定的字符串添加到列表中,如若已存在,则该动作无效
2.1.2.2、contains(value)
检测列表中是否存在给定的值,如若存在返回true,反之false
2.1.2.3、remove(value)
从列表中删除给定的字符串
2.1.2.4、toggle(value)
如果列表中已存在给定的值,删除它;反之,添加给定的值
2.2、焦点管理
2.2.1、document.activeElement属性
作用:这个属性会始终引用DOM中当前获得了焦点的元素。
元素获得焦点的方式:页面加载、用户输入、Tab键以及在代码中调用focus()
默认情况下:当文档刚刚加载完时,document.activaeElement中保存的是document.body元素的引用,
而文档加载期间,document.activeElement的值为null
2.2.2、document.hasFocus()方法
作用:用于确定某个元素是否获得了焦点,通过检测文档是否获得了焦点,可以获悉文档是否获得了焦点
【举例】当页面加载完毕后使“第二个表单”获得焦点,并判断是否获得焦点,以及输出当前获得焦点的元素的
ID及其类型
2.3、HTMLDocument的变化
2.3.1、readyState属性
2.3.1.1 Document的readyState属性有两个可能的属性值:
loading:正在加载文档
complete:已经加载完文档
2.3.1.2 作用
通过该属性来实现一个指示文档已经加载完成的指示器
2.3.1.3 使用
如若想要实现这样一个指示器,必须借助onload事件处理程序设置一个标签,表明文档已经加载完毕
2.3.2、兼容模式
2.3.3、head属性
2.4、字符集属性--获取文档字符集的信息
document.charset;//获取字符集信息
document.defaultCharset;//根据浏览器及其操作系统的设置,获取当前文档的默认字符集
2.5、自定义数据属性
HTML5规定可以为元素添加自定义非标准的属性,但需要添加前缀“data-”,目的是为元素提供与渲染无关的信息,或者提供语义信息。这些属性可以随意造,但须以“data-”作为前缀。
【举例】
2.6、插入标记
2.6.1、innerHTML属性
作用:返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记
【举例】
【注意】
在写模式下,innerHTML的值会被解析为DOM子树,替换调用元素的所有子节点。因为它的值被认为是HTML,所以其中的所有标签都会按照浏览器处理HTML的标准方式转换元素。
【举例】以上述问题为例
2.6.2、outerHTML属性
在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签。在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。
2.6.3、insertAdjacentHTML属性
2.7、scrollIntoView()方法