Javascript高级编程学习笔记（48）—

HTML变动最大的版本应该就是HTML5了，这里就介绍一些 HTML5新增的DOM相关的API

与类相关的扩充

HTML4在普及后有一个十分重要的变化，即class属性使用的场景越来越多

所以HTML5新增了许多API致力于简化CSS类的用法

1. getElemenetsByClassName（）该方法接收一个参数（包含一个或多个类名的字符串），返回带有指定类名的元素的Nodelist，传入多个类名时类名的顺序没有影响

2. classList属性该属性保存有一个 DOMTokenList 的实例

DOMTokenList 实例具有以下方法：

1. add（value) 将指定value添加到例表中，如果该value已存在则不添加

2. contains（value）返回一个布尔值用于表示列表中是否包含该value

3. remove（value）从列表中移除value

4.toggle（value）若列表中存在value则移除value，若不存在则添加value

所以除非需要完全重写类名，一般来说在HTML5之后就已经没有必要使用 className 属性

焦点管理

HTML5也添加了辅助管理DOM焦点的功能

首先就是document.activeElement属性

该属性始终指向DOM中获得焦点的元素

文档加载期间该属性的值为 null

除此而外新增document.hasFocus() 方法用于确定当前文档是否获得焦点

通过这个方法我们可以判断用户是否正在与当前页面交互

HTMLDocument变化

HTML5拓展了HTMLDocument，增加了一些新功能

1. readyState 属性该属性有两个值 loading 正在加载文档、complete文档加载完成

2.兼容模式即 document.compatMode属性用于表示浏览器的渲染方式

3.head属性通过document.head引用当前文档的head元素

字符集属性

HTML5新增了几个与文档字符集相关的属性

document.charset属性用于表示当前文档所使用的属性

document.defaultCharset属性用于表示当前文档的默认字符集

自定义数据属性

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

以上述规则添加的自定义属性，可以通过 dataset来访问自定义属性的值

如下所示

对于上述div元素我们可以使用如下代码来访问其自定义属性

var div = document.getElementById("lhy");

var date = div.dataset.date;

插入标记

1.innerHTML属性

当我们对元素的innerHTML属性进行写操作时，innerHTML会根据写入的值创建新的DOM树

然后以这个新的DOM树替换当前元素的子节点

innerHTML也有一些限制，在大多数浏览器中使用innerHTML插入script标签其中的代码并不会被执行

除此而外大多数浏览器支持以innerHTML插入style元素，但是IE8及以下的版本中style标签属于没有作用域的元素，所以在插入style元素的时候需要在其之前插入一个有作用域的元素

如下所示

div.innerHTML = "_<style type = \"text/css\">body {background-color:red;}</style>";// 第一个下划线会在文档中插入一个文本节点

div.removeChild(div.firsChild);// 移除下划线制造的文本节点

上述方法用于在低版本IE中通过innerHTML向文档中插入元素

需要注意的是以下元素不支持 innerHTML：

在IE8及以下版本的IE浏览器中<title>也没有innerHTML属性

2.outerHTML属性

与innerHTML属性的区别在于outerHTML属性包括调用元素

也就是说outerHTML会替换包括调用节点的DOM节点树

3.insertAdjacentHTML（）方法

该方法接收两个参数，第一个参数只能为以下值之一

“beforebegin” 在当前元素之前（紧邻的同辈元素）插入HTML文本

“afterbegin” 在当前元素之下插入一个新的子元素，或在第一个子元素之前再插入新的子元素

“beforeend” 在当前元素之下插入一个新的子元素，或在最后一个子元素之后插入新的子元素

“afterend” 在当前元素之后（紧邻的同辈元素）插入HTML文本

第二个参数的值与innerHTMl的内容一致

scrollIntoView()

至于如何将页面滚动写入标准 HTML5选择了 scrollIntoView作为标准实现

该方法可以对所有HTML元素调用，会让调用元素出现在浏览器视口中

对该方法传入 true 或者不传入值，则浏览器会将该元素顶部尽量与视口顶部平齐

如果传入false则会让该元素尽可能完整地出现在视口中，而顶部不一定平齐