DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应
用程序接口） 。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的
某一部分。DOM 脱胎于 Netscape 及微软公司创始的 DHTML（动态 HTML） ，但现在它已
经成为表现和操作页面标记的真正跨平台、语言中立的方式。

一、DOM 介绍

DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可
以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document
对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为
W3C 标准。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。
PS：IE 中的所有 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM
可能会和其他浏览器有一定的差异。
1.节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将
这种树型结构理解为由节点组成。
节点树
从上图的树型结构，我们理解几个概念，html 标签没有父辈，没有兄弟，所以 html 标
签为根标签。head 标签是 html 子标签，meta 和 title 标签之间是兄弟关系。如果把每个标签
当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
2.节点种类：元素节点、文本节点、属性节点。

二．查找元素
W3C 提供了比较方便简单的定位节点的方法和属性， 以便我们快速的对节点进行操作 。
分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute() 、
setAttribute()和 removeAttribute()。
元素节点方法
方法 说明
getElementById() 获取特定 ID 元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByName() 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性
1.getElementById()方法
getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该
元素的 HTMLDivElement 对象，如果不存在，则返回 null。
document.getElementById(‘box’); //获取 id 为 box 的元素节点
PS：上面的例子，默认情况返回 null，这无关是否存在 id=”box”的标签，而是执行顺序
问题。解决方法，1.把 script 调用标签移到 html 末尾即可；2.使用 onload 事件来处理 JS， 等
待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行
document.getElementById(‘box’);
};
PS：id 表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命
名的 id。某些低版本的浏览器会无法识别 getElementById()方法，比如 IE5.0-，这时需要做
一些判断，可以结合上章的浏览器检测来操作。
if (document.getElementById) { //判断是否支持 getElementById
alert(‘当前浏览器支持 getElementById’);
}
当我们通过 getElementById()获取到特定元素节点时， 这个节点对象就被我们获取到了 ，
而通过这个节点对象，我们可以访问它的一系列属性。
元素节点属性
属性 说明
tagName 获取元素节点的标签名
innerHTML 获取元素节点里的内容，非 W3C DOM 规范
document.getElementById(‘box’).tagName; //DIV
document.getElementById(‘box’).innerHTML; //测试 Div
HTML 属性的属性
属性 说明
id 元素节点的 id 名称
title 元素节点的 title 属性值
style CSS 内联样式属性值
className CSS 元素的类
document.getElementById(‘box’).id; //获取 id
document.getElementById(‘box’).id = ‘person’; //设置 id
document.getElementById(‘box’).title; //获取 title
document.getElementById(‘box’).title = ‘标题’ //设置 title
document.getElementById(‘box’).style; //获取 CSSStyleDeclaration 对象
document.getElementById(‘box’).style.color; //获取 style 对象中 color 的值
document.getElementById(‘box’).style.color = ‘red’; //设置 style 对象中 color 的值
document.getElementById(‘box’).className; //获取 class
document.getElementById(‘box’).className = ‘box’; //设置 class
alert(document.getElementById(‘box’).bbb); //获取自定义属性的值，非 IE 不支持
2.getElementsByTagName()方法
getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数
组保存着所有相同元素名的节点列表。
document.getElementsByTagName(‘*’); //获取所有元素
PS：IE 浏览器在使用通配符的时候，会把文档最开始的 html 的规范声明当作第一个元
素节点。
document.getElementsByTagName(‘li’); //获取所有 li 元素，返回数组
document.getElementsByTagName(‘li’)[0]; //获取第一个 li 元素，HTMLLIElement
document.getElementsByTagName(‘li’).item(0) //获取第一个 li 元素，HTMLLIElement
document.getElementsByTagName(‘li’).length; //获取所有 li 元素的数目
PS：不管是 getElementById 还是 getElementsByTagName，在传递参数的时候，并不是
所有浏览器都必须区分大小写， 为了防止不必要的错误和麻烦， 我们必须坚持养成区分大小
写的习惯。
3.getElementsByName()方法
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组
HTMLCollection(NodeList)。
document.getElementsByName(‘add’) //获取 input 元素
document.getElementsByName(‘add’)[0].value //获取 input 元素的 value 值
document.getElementsByName(‘add’)[0].checked//获取 input 元素的 checked 值
PS：对于并不是 HTML 合法的属性，那么在 JS 获取的兼容性上也会存在差异，IE 浏
览器支持本身合法的 name 属性，而不合法的就会出现不兼容的问题。
4.getAttribute()方法
getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有
一定区别。
document.getElementById(‘box’).getAttribute(‘id’);//获取元素的 id 值
document.getElementById(‘box’).id; //获取元素的 id 值
document.getElementById(‘box’).getAttribute(‘mydiv’);//获取元素的自定义属性值
document.getElementById(‘box’).mydiv //获取元素的自定义属性值， 非 IE 不支持
document.getElementById(‘box’).getAttribute(‘class’);//获取元素的 class 值，IE 不支持
document.getElementById(‘box’).getAttribute(‘className’);//非 IE 不支持
PS：HTML 通用属性 style 和 onclick，IE7 更低的版本 style 返回一个对象，onclick 返回
一个函数式。虽然 IE8 已经修复这个 bug，但为了更好的兼容，开发人员只有尽可能避免使
用 getAttribute()访问 HTML 属性了，或者碰到特殊的属性获取做特殊的兼容处理。
5.setAttribute()方法
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如
果属性本身已存在，那么就会被覆盖。
document.getElementById(‘box’).setAttribute(‘align’,’center’);//设置属性和值
document.getElementById(‘box’).setAttribute(‘bbb’,’ccc’);//设置自定义的属性和值
PS：在 IE7 及更低的版本中，使用 setAttribute()方法设置 class 和 style 属性是没有效果
的，虽然 IE8 解决了这个 bug，但还是不建议使用。
6.removeAttribute()方法
removeAttribute()可以移除 HTML 属性。
document.getElementById(‘box’).removeAttribute(‘style’);//移除属性
PS：IE6 及更低版本不支持 removeAttribute()方法。
三． DOM 节点
1.node 节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性 ，
分别为：nodeName、nodeType 和 nodeValue。
信息节点属性
节点类型 nodeName nodeType nodeValue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容(不包含 html)
document.getElementById(‘box’).nodeType; //1，元素节点
2.层次节点属性
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个
元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
层次节点属性
属性 说明
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
ownerDocument 获取该节点的文档根节点，相当与 document
parentNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点
attributes 获取当前元素节点的所有属性节点集合
1.childNodes 属性
childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点
和文本子节点。
var box = document.getElementById(‘box’); //获取一个元素节点
alert(box.childNodes.length); //获取这个元素节点的所有子节点
alert(box.childNodes[0]); //获取第一个子节点对象
PS：使用 childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如
HTMLElement；也有可能返回的是文本子节点，比如 Text。元素子节点可以使用 nodeName
或者 tagName 获取标签名称，而文本子节点可以使用 nodeValue 获取。
for (var i = 0; i < box.childNodes.length; i ++) {
//判断是元素节点，输出元素标签名
if (box.childNodes[i].nodeType === 1) {
alert(‘元素节点：’ + box.childNodes[i].nodeName);
//判断是文本节点，输出文本内容
} else if (box.childNodes[i].nodeType === 3) {
alert(‘文本节点：’ + box.childNodes[i].nodeValue);
}
}
PS：在获取到文本节点的时候，是无法使用 innerHTML 这个属性输出文本内容的。这
个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本。
alert(box.innerHTML); //innerHTML 和 nodeValue 第一个区别
PS：innerHTML 和 nodeValue 第一个区别，就是取值的。那么第二个区别就是赋值的时
候， nodeValue 会把包含在文本里的 HTML 转义成特殊字符， 从而达到形成单纯文本的效果。
box.childNodes[0].nodeValue = ‘abc‘;//结果为：abc
box.innerHTML = ‘abc‘; //结果为： abc
2.firstChild 和 lastChild 属性
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；lastChild 用于
获取当前元素节点的最后一个子节点，相当于 childNodes[box.childNodes.length - 1]。
alert(box.firstChild.nodeValue); //获取第一个子节点的文本内容
alert(box.lastChild.nodeValue); //获取最后一个子节点的文本内容
3.ownerDocument 属性
ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
alert(box.ownerDocument === document); //true，根节点
4.parentNode、previousSibling、nextSibling 属性
parentNode 属性返回该节点的父节点，previousSibling 属性返回该节点的前一个同级节
点，nextSibling 属性返回该节点的后一个同级节点。
alert(box.parentNode.nodeName); //获取父节点的标签名
alert(box.lastChild.previousSibling); //获取前一个同级节点
alert(box.firstChild.nextSibling); //获取后一个同级节点
5.attributes 属性
attributes 属性返回该节点的属性节点集合。
document.getElementById(‘box’).attributes //NamedNodeMap
document.getElementById(‘box’).attributes.length;//返回属性节点个数
document.getElementById(‘box’).attributes[0]; //Attr，返回最后一个属性节点
document.getElementById(‘box’).attributes[0].nodeType; //2，节点类型
document.getElementById(‘box’).attributes[0].nodeValue; //属性值
document.getElementById(‘box’).attributes[‘id’]; //Attr，返回属性为 id 的节点
document.getElementById(‘box’).attributes.getNamedItem(‘id’); //Attr
6.忽略空白文本节点
var body = document.getElementsByTagName(‘body’)[0];//获取 body 元素节点
alert(body.childNodes.length); //得到子节点个数，IE3 个，非 IE7 个
PS：在非 IE 中，标准的 DOM 具有识别空白文本节点的功能，所以在火狐浏览器是 7
个，而 IE 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。
function filterSpaceNode(nodes) {
var ret = []; //新数组
for (var i = 0; i < nodes.length; i ++) {
//如果识别到空白文本节点，就不添加数组
if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) continue; //把每次的元素节点，添加到数组里 ret.push(nodes[i]); } return ret; } PS：上面的方法，采用的忽略空白文件节点的方法，把得到元素节点累加到数组里返 回。那么还有一种做法是，直接删除空位文件节点即可。 function filterSpaceNode(nodes) { for (var i = 0; i < nodes.length; i ++) { if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
//得到空白节点之后，移到父节点上，删除子节点
nodes[i].parentNode.removeChild(nodes[i]);
}
}
return nodes;
}
PS：如果 firstChild、lastChild、previousSibling 和 nextSibling 在获取节点的过程中遇到
空白节点，我们该怎么处理掉呢？
function removeWhiteNode(nodes) {
for (var i = 0; i < nodes.childNodes.length; i ++) {
if (nodes.childNodes[i].nodeType === 3 &&
/^\s+$/.test(nodes.childNodes[i].nodeValue)) {
nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
}
}
return nodes;
}
四． 节点操作
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换
节点。
节点操作方法
方法 说明
write() 这个方法可以把任意字符串插入到文档中
createElement() 创建一个元素节点
appendChild() 将新节点追加到子节点列表的末尾
createTextNode() 创建一个文件节点
insertBefore() 将新节点插入在前面
repalceChild() 将新节点替换旧节点
cloneNode() 复制节点
removeChild() 移除节点
1.write()方法
write()方法可以把任意字符串插入到文档中去。
document.write(‘

这是一个段落！

box.appendChild(p); //把新元素节点

添加子节点末尾
4.createTextNode()方法
createTextNode()方法创建一个文本节点。
var text = document.createTextNode(‘段落’); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
5.insertBefore()方法
insertBefore()方法可以把节点创建到指定节点的前面。
box.parentNode.insertBefore(p, box); //把

二、DOM 扩展

1.呈现模式

从 IE6 开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。IE 为document 对象添加了一个名为 compatMode 属性，这个属性可以识别 IE 浏览器的文档处于什么模式如果是标准模式，则返回 CSS1Compat，如果是混杂模式则返BackCompat。

if (document.compatMode == ‘CSS1Compat‘) {
    alert(document.documentElement.clientWidth);
} else {
    alert(document.body.clientWidth);
}

PS： 后来 Firefox、 Opera 和 Chrome 都实现了这个属性。 从 IE8 后， 又引入 documentMode新属性，因为 IE8 有 3 种呈现模式分别为标准模式 8，仿真模式 7，混杂模式 5。所以如果想测试 IE8 的标准模式，就判断 document.documentMode > 7 即可。

2.滚动

DOM 提供了一些滚动页面的方法，如下：

document.getElementById(‘box‘).scrollIntoView(); //设置指定可见

3.children 属性

由于子节点空白问题，IE 和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想
得到有效子节点，可以使用 children 属性，支持的浏览器为：IE5+、Firefox3.5+、Safari2+ 、
Opera8+和 Chrome，这个属性是非标准的。

var box = document.getElementById(‘box‘);
alert(box.children.length); //得到有效子节点数目

4.contains()方法

判断一个节点是不是另一个节点的后代，我们可以使用 contains()方法。这个方法是 IE率先使用的，开发人员无须遍历即可获取此信息。

var box = document.getElementById(‘box‘);
alert(box.contains(box.firstChild)); //true

PS：早期的 Firefox 不支持这个方法，新版的支持了，其他浏览器也都支持，Safari2.x浏览器支持的有问题，无法使用。所以，必须做兼容。在 Firefox 的 DOM3 级实现中提供了一个替代的方法 compareDocumentPosition()方法。
这个方法确定两个节点之间的关系。

var box = document.getElementById(‘box‘);
alert(box.compareDocumentPosition(box.firstChild)); //20

关系掩码表

PS：为什么会出现 20，那是因为满足了 4 和 16 两项，最后相加了。为了能让所有浏览器都可以兼容，我们必须写一个兼容性的函数。

//传递参考节点(父节点)，和其他节点(子节点)
function contains(refNode, otherNode) {
//判断支持 contains，并且非 Safari 浏览器
if (typeof refNode.contains != ‘undefined‘ &&
!(BrowserDetect.browser == ‘Safari‘ && BrowserDetect.version < 3)) {
return refNode.contains(otherNode);
//判断支持 compareDocumentPosition 的浏览器，大于 16 就是包含
} else if (typeof refNode.compareDocumentPosition == ‘function‘) {
return !!(refNode.compareDocumentPosition(otherNode) > 16);
} else {
//更低的浏览器兼容，通过递归一个个获取他的父节点是否存在
var node = otherNode.parentNode;
do {
if (node === refNode) {
return true;
} else {
node = node.parentNode;
}
} while (node != null);
}
return false;
}

三． DOM 操作内容

虽然在之前我们已经学习了各种 DOM 操作的方法，这里所介绍是 innerText、innerHTML、outerText 和 outerHTML 等属性。除了之前用过的 innerHTML 之外，其他三个还么有涉及到。

1.innerText 属性

document.getElementById(‘box‘).innerText; //获取文本内容(如有 html 直接过滤掉)
document.getElementById(‘box‘).innerText = ‘Mr.Lee‘; //设置文本(如有 html 转义)

PS：除了 Firefox 之外，其他浏览器均支持这个方法。但 Firefox 的 DOM3 级提供了另外一个类似的属性：textContent，做上兼容即可通用。
document.getElementById(‘box’).textContent; //Firefox 支持
//兼容方案
function getInnerText(element) {
return (typeof element.textContent == ‘string’) ?
element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == ‘string’) {
element.textContent = text;
} else {
element.innerText = text;
}
}
2.innerHTML 属性
这个属性之前就已经研究过，不拒绝 HTML。
document.getElementById(‘box’).innerHTML; //获取文本(不过滤 HTML)
document.getElementById(‘box’).innerHTML = ‘123‘; //可解析 HTML
虽然 innerHTML 可以插入 HTML，但本身还是有一定的限制，也就是所谓的作用域元
素，离开这个作用域就无效了。
box.innerHTML = ““; //

第3章、DOM 操作表格

DOM 在操作生成 HTML 上， 还是比较简明的。 不过， 由于浏览器总是存在兼容和陷阱 ，导致最终的操作就不是那么简单方便了。 本章主要了解一下 DOM操作表格和样式的一些知识。

< table>标签是 HTML 中结构最为复杂的一个，我们可以通过 DOM 来创建生成它，或者 HTML DOM 来操作它。

PS：HTML DOM 提供了更加方便快捷的方式来操作Table， 有手册
//需要操作的 table

//使用 DOM 来创建这个表格
var table = document.createElement(‘table‘);
table.border = 1;
table.width = 300;

var caption = document.createElement(‘caption‘);
table.appendChild(caption);
caption.appendChild(document.createTextNode(‘人员表‘));

var thead = document.createElement(‘thead‘);
table.appendChild(thead);

var tr = document.createElement(‘tr‘);
thead.appendChild(tr);
var th1 = document.createElement(‘th‘);
var th2 = document.createElement(‘th‘);
var th3 = document.createElement(‘th‘);
tr.appendChild(th1);
th1.appendChild(document.createTextNode(‘姓名‘));
tr.appendChild(th2);
th2.appendChild(document.createTextNode(‘年龄‘));
document.body.appendChild(table);

PS：使用 DOM 来创建表格其实已经没有什么难度，就是有点儿小烦而已。下面我们再使用 HTML DOM 来获取和创建这个相同的表格。HTML DOM 中，给这些元素标签提供了一些属性和方法

< tbody>元素添加的属性和方法

< tr>元素添加的属性和方法

PS：因为表格较为繁杂，层次也多，在使用之前所学习的 DOM 只是来获取某个元素会非常难受，所以使用 HTML DOM 会清晰很多

//使用 HTML DOM 来获取表格元素
var table = document.getElementsByTagName(‘table‘)[0]; //获取 table 引用
//按照之前的 DOM 节点方法获取<caption>
alert(table.children[0].innerHTML); //获取 caption 的内容

PS：这里使用了 children[0]本身就忽略了空白，如果使用 firstChild 或者 childNodes[0]需要更多的代码。

//按 HTML DOM 来获取表格的<caption>
alert(table.caption.innerHTML); //获取 caption 的内容

//按 HTML DOM 来获取表头表尾<thead>、<tfoot>
alert(table.tHead); //获取表头
alert(table.tFoot); //获取表尾

//按 HTML DOM 来获取表体<tbody>
alert(table.tBodies); //获取表体的集合

PS：在一个表格中和是唯一的，只能有一个。而不是唯一的可以有多个，这样导致最后返回的和是元素引用，而返回的是元素集合。

//按 HTML DOM 来获取表格的行数
alert(table.rows.length); //获取行数的集合，数量

//按 HTML DOM 来获取表格主体里的行数
alert(table.tBodies[0].rows.length); //获取主体的行数的集合，数量

//按 HTML DOM 来获取表格主体内第一行的单元格数量(tr)
alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量

//按 HTML DOM 来获取表格主体内第一行第一个单元格的内容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容

//按 HTML DOM 来删除标题、表头、表尾、行、单元格
table.deleteCaption(); //删除标题
table.deleteTHead(); //删除<thead>
table.tBodies[0].deleteRow(0); //删除<tr>一行
table.tBodies[0].rows[0].deleteCell(0); //删除<td>一个单元格

//按 HTML DOM 创建一个表格
var table = document.createElement(‘table‘);
table.border = 1;
table.width = 300;
table.createCaption().innerHTML = ‘人员表‘;
//table.createTHead();
//table.tHead.insertRow(0);
var thead = table.createTHead();
var tr = thead.insertRow(0);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode(‘数据‘));
var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode(‘数据 2‘));
document.body.appendChild(table);

PS：在创建表格的时候< table>、< tbody>、< th>没有特定的方法，需要使用 document来创建。也可以模拟已有的方法编写特定的函数即可，例如：insertTH()之类的。

第3章 DOM操作样式

CSS 作为(X)HTML 的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关，所以我们有必要检测当前浏览器支持CSS 能力的级别。

DOM1 级实现了最基本的文档处理，DOM2 和 DOM3 在这个基础上增加了更多的交互能力，这里我们主要探讨 CSS，DOM2 增加了 CSS 编程访问方式和改变 CSS 样式信息。

DOM 一致性检测
功能 版本号 说明
Core 1.0、2.0、3.0 基本的 DOM,用于表现文档节点树
XML 1.0、2.0、3.0 Core 的 XML 扩展，添加了对 CDATA 等支持
HTML 1.0、2.0 XML 的 HTML 扩展，添加了对 HTML 特有元素支持
Views 2.0 基于某些样式完成文档的格式化
StyleSheets 2.0 将样式表关联到文档
CSS 2.0 对层叠样式表 1 级的支持
CSS2 2.0 对层叠样式表 2 级的支持
Events 2.0 常规的 DOM 事件
UIEvents 2.0 用户界面事件
MouseEvents 2.0 由鼠标引发的事件(如：click)
MutationEvents 2.0 DOM 树变化时引发的事件
HTMLEvents 2.0 HTML4.01 事件
Range 2.0 用于操作 DOM 树中某个范围的对象和方法
Traversal 2.0 遍历 DOM 树的方法
LS 3.0 文件与 DOM 树之间的同步加载和保存
LS-Async 3.0 文件与 DOM 树之间的异步加载和保存
Valuidation 3.0 在确保有效的前提下修改 DOM 树的方法
//检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力
alert(‘DOM1 级 CSS 能力：’ + document.implementation.hasFeature(‘CSS’, ‘2.0’));
alert(‘DOM2 级 CSS 能力：’ + document.implementation.hasFeature(‘CSS2’, ‘2.0’));
PS：这种检测方案在 IE 浏览器上不精确，IE6 中，hasFeature()方法只为 HTML 和版本
1.0 返回 true，其他所有功能均返回 false。但 IE 浏览器还是支持最常用的 CSS2 模块。
1.访问元素的样式
任何 HTML 元素标签都会有一个通用的属性：style。它会返回 CSSStypeDeclaration 对
象。下面我们看几个最常见的行内 style 样式的访问方式。
CSS 属性及 JavaScript 调用
CSS 属性 JavaScript 调用
color style.color
font-size style.fontSize
float 非 IE：style.cssFloat
float IE：style.styleFloat
var box = document.getElementById(‘box’); //获取 box
box.style.cssFloat.style; //CSSStyleDeclaration
box.style.cssFloat.style.color; //red
box.style.cssFloat.style.fontSize; //20px
box.style.cssFloat || box.style.styleFloat; //left，非 IE 用 cssFloat，IE 用 styleFloat
PS：以上取值方式也可以赋值，最后一种赋值可以如下：
typeof box.style.cssFloat != ‘undefined’ ?
box.style.cssFloat = ‘right’ : box.style.styleFloat = ‘right’;
DOM2 级样式规范为 style 定义了一些属性和方法
属性或方法 说明
cssText 访问或设置 style 中的 CSS 代码
length CSS 属性的数量
parentRule CSS 信息的 CSSRule 对象
getPropertyCSSValue(name) 返回包含给定属性值的 CSSValue 对象
getPropertyPriority(name) 如果设置了!important， 则返回， 否则返回空字符串
item(index) 返回指定位置 CSS 属性名称
removeProperty(name) 从样式中删除指定属性
setProperty(name,v,p) 给属性设置为相应的值，并加上优先权
box.style.cssText; //获取 CSS 代码
//box.style.length; //3，IE 不支持
//box.style.removeProperty(‘color’); //移除某个 CSS 属性，IE 不支持
//box.style.setProperty(‘color’,’blue’); //设置某个 CSS 属性，IE 不支持
PS：Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 只支持 cssText，而
getPropertyCSSValue()方法只有 Safari3+和 Chrome 支持。
PS：style 属性仅仅只能获取行内的 CSS 样式，对于另外两种形式内联

DOM 元素尺寸和位置

5.1获取元素CSS大小

5.1.1通过 style内联获取元素的大小

var box = document.getElementById(‘box‘); //获取元素
box.style.width; //200px、空
box.style.height; //200px、空

PS：style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高，如果有获取；如果没有则返回空。

5.1.2通过计算获取元素的大小

var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;
style.width; //1424px、200px、auto
style.height; //18px、200px、auto

PS：通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。如果本身设置大小，它会返回元素的大小，如果本身没有设置，非 IE浏览器会返回默认的大小，IE 浏览器返回 auto。

5.1.3通过 CSSStyleSheet 对象中的cssRules(或 rules)属性获取元素大小

var sheet = document.styleSheets[0]; //获取 link 或 style
var rule = (sheet.cssRules || sheet.rules)[0]; //获取第一条规则
rule.style.width; //200px、空
rule.style.height; //200px、空

PS：cssRules(或 rules)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式

总结：以上的三种 CSS 获取元素大小的方法，只能获取元素的 CSS 大小，却无法获取元素本身实际的大小。比如加上了内边距、滚动条、边框之类的

5.2获取元素实际大小

5.2.1clientWidth 和 clientHeight

这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。

PS： 返回了元素大小， 但没有单位， 默认单位是 px， 如果你强行设置了单位， 比如 100em之类，它还是会返回 px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

PS：对于元素的实际大小，clientWidth 和 clientHeight 理解方式如下：

1. 增加边框，无变化，为 200；
2. 增加外边距，无变化，为 200；
3. 增加滚动条，最终值等于原本大小减去滚动条的大小，为 184；
4. 增加内边距，最终值等于原本大小加上内边距的大小，为 220；

PS：如果说没有设置任何 CSS 的宽和高度，那么非 IE 浏览器会算上滚动条和内边距的计算后的大小，而 IE 浏览器则返回 0。

5.2.2 scrollWidth 和 scrollHeight

这组属性可以获取滚动内容的元素大小

PS：返回了元素大小，默认单位是 px。如果没有设置任何 CSS 的宽和高度，它会得到计算后的宽度和高度。
PS：对于元素的实际大小，scrollWidth 和 scrollHeight 理解如下:

1. 增加边框，不同浏览器有不同解释：
   a) Firefox 和 Opera 浏览器会增加边框的大小，220 x 220
   b) IE、Chrome 和 Safari 浏览器会忽略边框大小，200 x 200
   c) IE 浏览器只显示它本来内容的高度，200 x 18
2. 增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为 220 x 38
3. 增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为 184 x 18
4. 增加外边据，无变化。
5. 增加内容溢出，Firefox、Chrome 和 IE 获取实际内容高度，Opera 比前三个浏览器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。

5.2.3offsetWidth 和 offsetHeight

这组属性可以返回元素实际大小，包含边框、内边距和滚动条。

PS：返回了元素大小，默认单位是 px。如果没有设置任何 CSS 的宽和高度，他会得到计算后的宽度和高度。

PS：对于元素的实际大小，offsetWidth 和 offsetHeight 理解如下：

1. 增加边框，最终值会等于原本大小加上边框大小，为 220；
2. 增加内边距，最终值会等于原本大小加上内边距大小，为 220；
3. 增加外边据，无变化；
4. 增加滚动条，无变化，不会减小；

PS：对于元素大小的获取，一般是块级(block)元素并且以设置了 CSS 大小的元素较为方便。如果是内联元素(inline)或者没有设置大小的元素就尤为麻烦，所以，建议使用的时候注意。

5.3获取元素周边大小

5.3.1clientLeft 和 clientTop

这组属性可以获取元素设置了左边框和上边框的大小。

PS：目前只提供了 Left 和 Top 这组，并没有提供 Right 和 Bottom。如果四条边宽度不
同的话，可以直接通过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。

5.3.2.offsetLeft 和 offsetTop

这组属性可以获取当前元素相对于父元素的位置。

PS：获取元素当前相对于父元素的位置，最好将它设置为定位 position:absolute；否则不同的浏览器会有不同的解释。

**PS：加上边框和内边距不会影响它的位置，但加上外边据会累加。
box.offsetParent; //得到父元素**

PS：offsetParent 中，如果本身父元素是，非 IE 返回 body 对象，IE 返回 html 对象。如果两个元素嵌套，如果上父元素没有使用定位 position:absolute，那么 offsetParent 将返回 body 对象或 html 对象。所以，在获取 offsetLeft 和 offsetTop 时候，CSS 定位很重要。

如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离 body 或 html元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数 ，通过不停的向上回溯获取累加来实现。

box.offsetTop + box.offsetParent.offsetTop; //只有两层的情况下
如果多层的话，就必须使用循环或递归。
function offsetLeft(element) {
var left = element.offsetLeft; //得到第一层距离
var parent = element.offsetParent; //得到第一个父元素
while (parent !== null) { //如果还有上一层父元素
left += parent.offsetLeft; //把本层的距离累加
parent = parent.offsetParent; //得到本层的父元素
} //然后继续循环
return left;
}

5.3.3scrollTop 和 scrollLeft

这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。

如果要让滚动条滚动到最初始的位置，那么可以写一个函数：

function scrollStart(element) {
    if (element.scrollTop != 0) element.scrollTop = 0;
}

5.4获取元素位置

元素位置
上一章已经通过几组属性可以获取元素所需的位置，那么这节课补充一个 DOM 的方法：getBoundingClientRect()。这个方法返回一个矩形对象，包含四个属性：left、top、right和 bottom。分别表示元素各边与页面上边和左边的距离。

var box = document.getElementById(‘box‘); //获取元素
alert(box.getBoundingClientRect().top); //元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); //元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); //元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); //元素左边距离页面左边的距离

PS：IE、Firefox3+、Opera9.5、Chrome、Safari 支持，在 IE 中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

document.documentElement.clientTop; //非 IE 为 0，IE 为 2
document.documentElement.clientLeft; //非 IE 为 0，IE 为 2
function getRect(element) {
    var rect = element.getBoundingClientRect();
    var top = document.documentElement.clientTop;
    var left = document.documentElement.clientLeft;
    return {
    top : rect.top - top,
    bottom : rect.bottom - top,
    left : rect.left - left,
    right : rect.right - left
    }
}

PS：分别加上外边据、内边距、边框和滚动条，用于测试所有浏览器是否一致。

第6章 动态加载脚本和样式

6.1 动态脚本

当网站需求变大，脚本的需求也逐步变大。我们就不得不引入太多的 JS 脚本而降低了整站的性能，所以就出现了动态脚本的概念，在适时的时候加载相应的脚本。
比如：我们想在需要检测浏览器的时候，再引入检测文件。

var flag = true; //设置 true 再加载
if (flag) {
    loadScript(‘browserdetect.js‘); //设置加载的 js
}
function loadScript(url) {
    var script = document.createElement(‘script‘);
    script.type = ‘text/javascript‘;
    script.src = url;
    //document.head.appendChild(script); //document.head 表示<head>
    document.getElementsByTagName(‘head‘)[0].appendChild(script);
}

PS：document.head 调用，IE 不支持，会报错！

//动态执行 js
var script = document.createElement(‘script‘);
script.type = ‘text/javascript‘;
var text = document.createTextNode("alert(‘Lee‘)"); //IE 浏览器报错
script.appendChild(text);
document.getElementsByTagName(‘head‘)[0].appendChild(script);

**PS：IE 浏览器认为 script 是特殊元素，不能在访问子节点。为了兼容，可以使用 text属性来代替。
script.text = “alert(”)”; //IE 可以支持了。**
PS：当然，如果不支持 text，那么就可以针对不同的浏览器特性来使用不同的方法。 这里就忽略写法了。

6.2 动态样式

为了动态的加载样式表， 比如切换网站皮肤。 样式表有两种方式进行加载， 一种是< link>标签，一种是< style>标签。

//动态执行 link
var flag = true;
if (flag) {
    loadStyles(‘basic.css‘);
}
function loadStyles(url) {
    var link = document.createElement(‘link‘);
    link.rel = ‘stylesheet‘;
    link.type = ‘text/css‘;
    link.href = url;
    document.getElementsByTagName(‘head‘)[0].appendChild(link);
}

//动态执行 style
var flag = true;
if (flag) {
var style = document.createElement(‘style‘);
style.type = ‘text/css‘;
//var box= document.createTextNode(#box{background:red}‘); IE 不支持
//style.appendChild(box);
document.getElementsByTagName(‘head‘)[0].appendChild(style);
insertRule(document.styleSheets[0], ‘#box‘, ‘background:red‘, 0);
}
function insertRule(sheet, selectorText, cssText, position) {
    //如果是非 IE
    if (sheet.insertRule) {
    sheet.insertRule(selectorText + "{" + cssText + "}", position);
    //如果是 IE
    } else if (sheet.addRule) {
        sheet.addRule(selectorText, cssText, position);
    }
}