JavaScript DOM笔记：获取及操作元素
先贴一个使用的小技巧：
temp2 = document.getElementById( ' id2 ' );
which = temp1 || temp2;
如果temp1元素存在，则which指向temp1，否则which指向temp2。
五个指针：parentNode, previousSibling, nextSibling, firstChild, lastChild
三种节点：
元素节点，文本节点(如果存在任何空白符，也被认作文本节点)，文档根元素()
可以通过检查节点的nodeType属性确定节点类型：{1:document.ELEMENT_NODE:元素，3:document.TEXT_NODE:文本，9:document_NODE:根元素}
由于文本节点会引起混乱使得我们很难准确地定位，因此在获取元素节点的时候应该过滤文本节点。一种好而直观的实现方案是，为HTMLElement的原型绑定相应函数，由于原型继承每个HTML DOM元素也可以获得这些函数：
{
var elem = this;
do {
elem = elem.previousSibling;
} while ( elem && elem.nodeType != 1);
return elem;
};
用类似以上的方法定义first, next, prev, last等函数可以在Firefox、Safari和Opera上获得成功，但却不能在IE上实现，原因是IE不支持HTMLElement！！（IE真是太烦人了）。
据说现在有一个可以直接使用HTMLElement的库，由Jason Karl Davis编写的为两个不支持HTMLElement的浏览器提供了访问HTMLElement的方法。[查看]
但是我将这个脚本包含进去之后在IE中仍然不能使用HTMLElement。本人愚笨，没看懂代码，虽然仅仅是请问有谁知道是怎么才能正确使用那个库吗？
根元素<html>：document.documentElement
标准DOM方法
源于两个强大的函数 getElementById 与 getElementsByTagName （注意Element单词的单复数）
可以按以下的封装方法方便地获取元素：
return document.getElementById(name);
}
function tag(name, elem) {
return (elem || document).getElementsByTagName(name);
}
需要注意的是，getElementsByTagName返回一个节点NodeList。该结构跟普通的JavaScript数组相似，但是不支持push(), pop(), shift()等方法。
DOM加载：浏览器渲染和操作顺序
1.HTML解析完毕
2.外部脚本和样式表加载完毕
3.脚本在文档内解析并执行
4.HTML DOM完全构造起来
5.图片和外部内容加载
6.网页完成加载
基于这个顺序，我们会发现如果在DOM完全加载之前使用DOM可能会发生错误（这个可能是很多初学者曾遇到的问题），而如果用onload加载函数又必须等待图片、视频等元素的加载，造成无法运行JavaScript。
监听DOM加载状态
这项技术在不堵塞浏览器加载的情况下尽可能快地检查HTML DOM文档是否已经加载了执行所必须的属性。
document
document.getElementById
document.getElementsByTagName
document.body
检查这几个对象可以获知DOM的加载状态
以下代码监听DOM何时加载完毕（来自《精通JavaScript》）
function
domReady(func)
{
// 假如DOM已经加载，马上执行函数 if (domReady.done) return func(); // 假如我们已经增加了一个函数
if (domReady.timer) { // 把它加入到待执行函数清单中 domReady.ready.push(func);
} else { // 为页面加载完毕绑定一个事件以防止它最先完成。使用addEvent函数 // addEvent函数为由Dean Edwards编写的著名函数 addEvent(window, "load", isDOMReady ); // 初始化待执行函数的数组 domReady.ready[ func ]; // 尽可能快地检查DOM是否已可用 domReady.timer = setInterval(isDOMReady, 13); }
}
;
//
检查DOM是否已可操作
function
isDOMReady()
{ // 如果我们能判断出DOM已可用，忽略 if (domReady.done) return false; // 检查若干函数和元素是否可用 if (document && document.getElementsByTagName && document.getElementById && document.body) { // 如果可用，我们可以停止检查 clearInterval(douReady.timer); domReady.timer = null; // 执行所有正等待的函数 for (var i = 0; i < domReady.ready.length; i++) domReady.ready[i](); // 记录我们在此已经完成 domReady.ready = null; domReady.done = true; }}
通过类名查找元素
var r = [];
var re = new RegExp( " (^|//s) " + name + " (//s|$) " );
var e = document.getElementsByTagName(type || " * " );
for ( var j = 0 ; j < e.length; j ++ )
if (re.test(e[j].className))
r.push(e[j]);
return r;
}
其他元素获取方法：cssQuery、jQuery、XPath
获取元素内文本
所有 非 基于Mozilla的浏览器中都有一个叫作innerText的属性可以调用。但是对于Mozilla浏览器和XML文档却不奏效。解决方法是获取nodeValue。
var t = '' ;
e = e.childNodes || e;
for ( var i = 0 ; i < e.length; i ++ ) {
t += e[i].nodeType != 1 ? e[i].nodeValue : getText(e[i].childNodes);
}
return t;
};
innerHTML
所有的主流浏览器都实现了innerHTML属性，但是因为没有统一标准，所以或多或少会有一些怪异的bug
1.基于Mozilla的浏览器在innerHTML声明中并不回会返回<style>元素；
2.IE返回的元素字符都是大写的；
3.innerHTML作为一个只能用在HTML DOM文档的元素中的属性，若在XML DOM文档中使用的话只会返回null值。
另外有两个outer××的属性，但是貌似只有IE支持。摒弃……
hasAtrribute函数
IE不支持hasAtrribute这样常用的函数，但是支持getAtrribute函数，所以我们只能……
return elem.getAttribute(name) != null ;
};
其中有四个属性名称需要注意，在hasAttribute / getAttribute / setAttribute 这几个函数中没有什么特殊情况，但是在使用“.”选择器的时候就要注意了，这四个属性名分别是 class / for / float / text ，它们在“.”选择器时应使用的属性分别为 className / htmlFor / cssFloat / cssText ，原因是原单词都是JavaScript的保留字，如果我们用字符串的方式获取他们的话，就使用原单词可以了。我曾经因为className属性而让我感到绝望，我以为JavaScript中对html属性的获取是多么的困难，连属性名都要改！
获取和设置元素属性的值的通用函数（来自《精通JavaScript》）
// 确保name是正确的
if ( ! name || name.constructor != String)
return '' ;
// 检查name是否处在怪异命名的情形中(这句写得很精美)
name = { ' for ' : ' htmlFor ' , ' class ' : ' className ' }[name] || name;
// 如果用户传入了value参数的话，那么
if ( typeof value != ' undefined ' ) {
// 首先使用快捷方式
elem[name] = value;
// 可以的话，使用setAtrribute
if (elem.setAttribute)
elem.setAttribute(name, value);
}
// 返回属性值
return elem[name] || elem.getAttribute(name) || '' ;
}
自由添加与获取自定义属性
可以自己增加一个新的属性然后再次获取，不必理会这个属性是否具有其html语义。