[转]《精通Javascript》笔记：第五章(DOM)

《精通Javascript》笔记：第五章(DOM)

Published by sansan at 3:06 pm under 前端|Front-End

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;
}