- DOM是一个表达XML文档的标准（由W3C制定的）。它未必是最快的方式，也未必是最轻量级的或者最容易使用的，但确实应用最广泛的。
- 访问根元素<html>：document.documentElement
- 处理DOM中的空格：终于知道前几天看的as程序中为啥要清空格了。
Firefox下任何空格、换行、tab都会被认为是一个childnode，而IE下只有内联元素（如em，span）后的换行、空格、tab会被认为是一个childnode。
function cleanWhiteSpace(elem) {
elem = elem || document;
var cur = elem.firstChild;
while (!cur) {
if (cur.noteType == 3 && !/\S/.test(cur.nodeValue)) {
elem.removeChild(cur);
} else if (cur.nodeType == 1) {
cleanWhiteSpace(cur);
}
cur = cur.nextSibling;
}
}
- 元素：1，document.ELEMENT_NODE
文本：3，document.TEXT_NODE
文档：9，document.DOCUMENT_NODE
常量只对非IE浏览器有效
- Firefox、Safari、Opera中存在一个强大的对象原型（Object Prototype）叫HTMLElement。幸运的是，jason Karl Davis为两个不支持的浏览器写了一个支持访问HTMLElement的库。
- 通过getElementsByTagName返回的nodeList数组，不支持pop(), push(), shift()等数组的常用方法。
- 浏览器的渲染和操作顺序大致如下：
1) HTML解析完毕
2) 外部脚本和样式表加载完毕
3) 脚本在文档内解析并执行
4) HTML DOM完全构造起来
5) 图片和外部内容加载
6) 网页完成加载
function domReady(f) {
if (domReady.done) return f();
if (domReady.timer) {
domReady.ready.push(f);
} else {
addEvent(window, ‘load’, isDOMReady);
domReady.ready = [f];
domReady.timer = setInterval(isDOMReady, 13);
}
}
function isDOMReady() {
if (domReady.done) return false;
if (document && document.getElementsByTagName && document.getElementById && document.body) {
clearInterval(domReady.timer);
domReady.timer = null;
for (var i=0; i<domReady.ready.length; i++) {
domReady.ready[i]();
}
domReady.ready = null;
domReady.done = true;
}
}
- Selector：CSS1 CSS2 CSS3 cssQuery XPath 1.0 XPath 2.0
- 获取元素内文本内容的一个窍门是，需要记住元素并不是直接包含文本的，而是包含在一个子文本节点中。
elem.innerText; // 非Mozilla浏览器
elem.firstChild.nodeValue; // 其他浏览器
// 一个获取元素文本内容的通用函数
function text(e) {
var t = ”;
e = e.childNodes || e;
for (var i=0; i<e.length; i++) {
t += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);
}
return t;
}
- 存取属性：className, htmlFor, cssFloat, cssText
- 可以设置和获取非传统的属性，就是自创的属性。（比如菜单展开的时候，设置open=true）
- 记住insertBefore(insert, before)的参数顺序：看函数名，insert第一个，before第二个。
- 根据http://quirksmode.org的说法，用innerHTML注入html比DOM方法快很多。
- 转化一个DOM节点/HTML字符串混合型参数数组为纯粹的DOM节点数组
function checkElem(a) {
var r = [];
if (a.constructor != Array) a = [a];
for (var i=0; i<a.length; i++) {
if (a[i].constructor == String) {
var div = document.createElement(’div’);
div.innerHTML = a[i];
for (var j=0; j<div.childNodes.length; j++) {
r[r.length] = div.childNodes[j];
}
} else if (a[i].length) {
for (var j=0; j<a[i].length; j++) {
r[r.length] = a[i][j];
}
} else {
r[r.length] = a[i];
}
}
return r;
}
