DOM扩展,DOM2和DOM3

DOM扩展

选择符API

Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll()。在兼容的浏
览器中，能够经过Document 及Element 类型的实例调用它们。目前已彻底支持Selectors API Level 1
的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

querySelector()方法

//取得body 元素
var body = document.querySelector("body");
//取得ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图像元素
var img = document.body.querySelector("img.button");

querySelectorAll()方法

//取得某<div>中的全部<em>元素（相似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的全部元素
var selecteds = document.querySelectorAll(".selected");
//取得全部<p>元素中的全部<strong>元素
var strongs = document.querySelectorAll("p strong");

HTML5

与类相关的扩充

getElementsByClassName()方法

//取得全部类中包含"username"和"current"的元素，类名的前后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

支持 getElementsByClassName()方法的浏览器有IE 9+、Firefox 3+、Safari 3.1+、Chrome 和
Opera 9.5+。

焦点管理

document.activeElement

这个属性指向的是当前得到焦点的元素,使用focus()可让元素得到焦点

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

document.hasFocus()

这个方法用于肯定文档是否得到了焦点

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

实现了这两个属性的浏览器的包括IE 4+、Firefox 3+、Safari 4+、Chrome 和Opera 8+。

HTMLDocument的变化

readyState 属性

document.readyState表示文档的加载进度,它有两个值分别为'loading'和'complete'.

if(document.readyState == 'complete'){
    //执行操做
}

支持 readyState 属性的浏览器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。

compatMode 的属性

document.compatMode属性告诉开发人员浏览器采用了哪一种渲染模式。在标准模式下，document.compatMode 的
值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。

if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

兼容性:IE、Firefox、Safari 3.1+、Opera 和Chrome

字符编码

document.charset

当前文档的字符编码

document.defaultCharset

当前文档的默认字符编码

自定义数据属性

HTML5 规定能够为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}

支持自定义数据属性的浏览器有Firefox 6+和Chrome

插入标记

innerHTML属性

在读模式下，innerHTML 属性返回与调用元素的全部子节点（包括元素、注释和文本节点）对应
的HTML 标记。在写模式下，innerHTML 会根据指定的值建立新的DOM树，而后用这个DOM树彻底
替换调用元素原先的全部子节点

outerHTML 属性

在读模式下，outerHTML 返回调用它的元素及全部子节点的HTML 标签。在写模式下，outerHTML
会根据指定的HTML 字符串建立新的DOM 子树，而后用这个DOM子树彻底替换调用元素。

内存与性能问题

使用本节介绍的方法替换子节点可能会致使浏览器的内存占用问题，尤为是在IE 中，问题更加明
显。在删除带有事件处理程序或引用了其余JavaScript 对象子树时，就有可能致使内存占用问题。假设
某个元素有一个事件处理程序（或者引用了一个JavaScript 对象做为属性），在使用前述某个属性将该元
素从文档树中删除后，元素与事件处理程序（或JavaScript 对象）之间的绑定关系在内存中并无一并
删除。若是这种状况频繁出现，页面占用的内存数量就会明显增长。所以，在使用innerHTML、
outerHTML 属性方法时，最好先手工删除要被替换的元素的全部事件处理程序和JavaScript 对象属性

scrollIntoView()方法

//让元素可见
document.forms[0].scrollIntoView();

DOM2和DOM3

DOM2 和DOM3级分为许多模块（模块之间具备某种关联），分别描述了DOM 的某个很是具体的子集。这些模块以下

• DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。

• DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不一样视图。

• DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM文档交互。

• DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS 样式信息。

• DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和选择其特定部分的新接口。

• DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML 基础上构建，添加了更多属性、方法和新接口

样式

在 HTML 中定义样式的方式有3 种：经过<link/>元素包含外部样式表文件、使用<style/>元素
定义嵌入式样式，以及使用style 特性定义针对特定元素的样式。“DOM2 级样式”模块围绕这3 种应用
样式的机制提供了一套API。要肯定浏览器是否支持DOM2 级定义的CSS 能力，可使用下列代码

var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

访问元素的样式

任何支持 style 特性的HTML 元素在JavaScript 中都有一个对应的style 属性。访问和设置元素的css属性能够这样操做:

var div = document.getElementById('myDiv');
console.log(div.style.color); //获取color值
div.style.color = 'red';    //设置color值
div.style.fontSize = '20px';//设置font-size的值(这里会将有短横线的值转化为驼峰命名来获取或设置)

注：IE6+,chrome,firfox支持这种获取或设置css的方式.这里有一个特例,因为float是保留关键字,因此经过cssFloat来访问和设置,而IE中则经过styleFloat来设置或访问.
元素的style对象除了有css的样式属性外,也包含了本身的一些属性,具体以下:

• cssText：经过它可以访问和设置style 特性中的CSS代码.支持IE6+,chrome,firfox.

• length：应用给元素的CSS 属性的数量。支持IE9+,chrome,firfox.

• parentRule：表示CSS 信息的CSSRule 对象,后面将讨论CSSRule 类型。

• getPropertyPriority(propertyName)：若是给定的属性使用了!important 设置，则返回"important"；不然，返回空字符串。支持IE9+,chrome,firfox.

• getPropertyValue(propertyName)：返回给定属性的字符串值。支持IE9+、Safari,Chrome,firfox

• item(index)：返回给定位置的CSS 属性的名称。支持IE9+、Safari,Chrome,firfox

• removeProperty(propertyName)：从样式中删除给定属性。支持IE9+、Safari,Chrome,firfox

• setProperty(propertyName,value,priority)：将给定属性设置为相应的值，并加上优先权标志（"important"或者一个空字符串）。支持IE9+、Safari,Chrome,firfox

//设置style对象的cssText属性
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

操做样式表

CSSStyleSheet 类型表示的是样式表，包括经过<link>元素包含的样式表和在<style>元素中定义的样式表,使用下面的代码能够肯定浏览器是否支持DOM2 级样式表:

var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets", "2.0");

CSSStyleSheet 继承自StyleSheet，后者能够做为一个基础接口来定义非CSS 样式表。从StyleSheet 接口继承而来的属性以下:

• disabled：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true能够禁用样式表。

• href：若是样式表是经过<link>包含的，则是样式表的URL；不然，是null。

• media：当前样式表支持的全部媒体类型的集合。与全部DOM 集合同样，这个集合也有一个length 属性和一个item()方法。也可使用方括号语法取得集合中特定的项。若是集合是空列表，表示样式表适用于全部媒体。在IE 中，media 是一个反映<link>和<style>元素media特性值的字符串。

• ownerNode：指向拥有当前样式表的节点的指针，样式表多是在HTML 中经过<link>或<style/>引入的（在XML 中多是经过处理指令引入的）。若是当前样式表是其余样式表经过@import 导入的，则这个属性值为null。IE 不支持这个属性。

• parentStyleSheet：在当前样式表是经过@import 导入的状况下，这个属性是一个指向导入它的样式表的指针。

• title：ownerNode 中title 属性的值。

• type：表示样式表类型的字符串。对CSS 样式表而言，这个字符串是"type/css"。

除了 disabled 属性以外，其余属性都是只读的。在支持以上全部这些属性的基础上，CSSStyleSheet 类型还支持下列属性和方法：

• cssRules：样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个相似的rules 属性。

• ownerRule：若是样式表是经过@import 导入的，这个属性就是一个指针，指向表示导入的规则；不然，值为null。IE 不支持这个属性。

• deleteRule(index)：删除cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个相似的removeRule()方法。

• insertRule(rule,index)：向cssRules 集合中指定的位置插入rule 字符串。IE 不支持这个方法，但支持一个相似的addRule()方法。

应用于文档的全部样式表是经过 document.styleSheets 集合来表示的。也能够直接经过<link>或<style>元素取得CSSStyleSheet 对象。DOM 规定了一个包含CSSStyleSheet 对象的属性，名叫sheet；除了IE，其余浏览器都支持这个属性。IE 支持的是styleSheet属性

元素大小

偏移量

• offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

• offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

• offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

• offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

客户区大小

有关客户区大小的属性有两个：clientWidth 和clientHeight。其中，clientWidth 属性是元素内容区宽度加上左右内边距宽度；clientHeight 属性是元素内容区高度加上上下内边距高度

滚动大小

• scrollHeight：在没有滚动条的状况下，元素内容的总高度。

• scrollWidth：在没有滚动条的状况下，元素内容的总宽度。

• scrollLeft：被隐藏在内容区域左侧的像素数。经过设置这个属性能够改变元素的滚动位置。

• scrollTop：被隐藏在内容区域上方的像素数。经过设置这个属性能够改变元素的滚动位置。

肯定元素大小

IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每一个元素都提供了一个getBoundingClientRect()方
法。这个方法返回会一个矩形对象，包含4 个属性：left、top、right 和bottom。这些属性给出了元素在页面中相对于视口的位置。可是，浏览器的实现稍有不一样。IE8 及更早版本认为文档的左上角坐
标是(2, 2)，而其余浏览器包括IE9 则将传统的(0,0)做为起点坐标。所以，就须要在一开始检查一下位于
(0,0)处的元素的位置，在IE8 及更早版本中，会返回(2,2)，而在其余浏览器中会返回(0,0).

遍历

DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM 结构的类型：NodeIterator
和TreeWalker。这两个类型可以基于给定的起点对DOM 结构执行深度优先（depth-first）的遍历操做。
在与DOM 兼容的浏览器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome
0.2 及更高版本），均可以访问到这些类型的对象。IE 不支持DOM 遍历。使用下列代码能够检测浏览器
对DOM2 级遍历能力的支持状况。

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

范围

为了让开发人员更方便地控制页面，“DOM2 级遍历和范围”模块定义了“范围”（range）接口。通过范围能够选择文档中的一个区域，而没必要考虑节点的界限（选择在后台完成，对用户是不可见的）。在常规的DOM 操做不能更有效地修改文档时，使用范围每每能够达到目的。Firefox、Opera、Safari 和Chrome 都支持DOM 范围。IE 以专有方式实现了本身的范围特性。