javascript基础：DOM2

一、呈现模式

从
IE6
开始开始区分标准模式和混杂模式(怪异模式),主要是看文档的声明。

<!DOCTYPE>有这个声明的为标准模式，没有这个声明的为混杂模式。

IE
为document
对象添加了一个名为
compatMode
属性,这个属性可以识别
IE
浏览器的文档处于什么模式。

如果是标准模式,则返回
CSS1Compat,如果是混杂模式则返回
BackCompat。

if (document.compatMode == 'CSS1Compat') {//标准模式
alert(document.documentElement.clientWidth);
}
else if (document.compatMode == 'BackCompat'){//混杂模式
alert(document.body.clientWidth);
}PS:后来
Firefox、Opera
和
Chrome
都实现了这个属性。从
IE8
后,又引入
documentMode新属性,因为
IE8
有
3
种呈现模式分别为标准模式
8,仿真模式
7,混杂模式
5。所以如果想测试
IE8
的标准模式,就判断
document.documentMode > 7
即可。 

二、滚动

DOM
提供了一些滚动页面的方法,如下:

//设置指定可见，通常与事件在一块使用
document.getElementById('box').scrollIntoView();

三、children属性
children属性获得的子节点不包括空白节点，这是与childNode属性的区别。

childNode属性获得的子节点包括空白节点，有时需要移除或删除空白节点，然后再做处理。

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

四、contain属性

判断一个节点是不是另一个节点的后代,我们可以使用
contains()方法。这个方法是
IE率先使用的,开发人员无须遍历即可获取此信息。 var box = document.getElementById('box');
alert(box.contains(box.firstChild)); //true

有的浏览器是不支持此方法的，在 Firefox
的 DOM3
级实现中提供了一个替代的方法 compareDocumentPosition()方法。这个方法通过返回关系掩码确定两个节点之间的关系。

var box = document.getElementById('box');
alert(box.compareDocumentPosition(box.firstChild)); //20 返回20，20代表的关系是 居后 + 被包含

由于contain属性的支持问题，需要做兼容处理，写一个兼容性的函数

//传递参考节点(父节点),和其他节点(子节点)
function contains(refNode, otherNode) {
//判断支持 contains,并且非 Safari 浏览器
if (typeof refNode.contains != 'undefined' &&!(BrowserDetect.browser == 'Safari' && BrowserDetect.version < 3)) {//这里用到了BrowserDetect嗅探器
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操作内容

1、innerText
属性
document.getElementById('box').innerText; //获取文本内容(如有 html 直接过滤掉)
document.getElementById('box').innerText = 'Mr.Lee'; //设置文本(如有 html 转义)
document.getElementById('box').textContent; //Firefox 支持 (Firefox不支持innerText属性，用这个属性进行了代替，所以也需要对firefox做兼容处理)

2、innerHTML
这个属性不拒绝 HTML。

document.getElementById('box').innerHTML; //获取文本(不过滤 HTML)
document.getElementById('box').innerHTML = '<b>123</b>'; //可解析 HTML
//虽然 innerHTML 可以插入 HTML,但本身还是有一定的限制,也就是所谓的作用域元素,离开这个作用域就无效了。
box.innerHTML = "<script>alert('Lee');</script>"; //<script>元素不能被执行
box.innerHTML = "<style>background:red;</style>"; //<style>元素不能被执行


3、outerText
//outerText 在取值的时候和 innerText 一样,同时火狐不支持
var box = document.getElementById('box');
box.outerText = '<b>123</b>';//,赋值方法相当危险,他不单替换了文本内容,还将元素直接抹去。
alert(document.getElementById('box')); //null,建议不去使用

4、outerHTML

//outerHTML 属性在取值和 innerHTML 一致,
var box = document.getElementById('box');
box.outerHTML = '123';//和 outerText 也一样,很危险,赋值的之后会将元素抹去。
alert(document.getElementById('box')); //null,建议不去使用,火狐旧版未抹去

PS:关于最常用的
innerHTML
属性和节点操作方法的比较,在插入大量
HTML
标记时使用
innerHTML
的效率明显要高很多。

因为在设置
innerHTML
时,会创建一个
HTML
解析器。这个解析器是浏览器级别的(C++编写),因此执行
JavaScript
会快的多。

但,创建和销毁
HTML
解析器也会带来性能损失。最好控制在最合理的范围内,如下:

for (var i = 0; i < 10; i ++) {
ul.innerHTML = '<li>item</li>';//避免频繁
}
//改
for (var i = 0; i < 10; i ++) {
a = '<li>item</li>';//临时保存
}
ul.innerHTML = a;