html5 dom扩展,DOM扩展之HTML5

一、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()方法