DOM笔记：获取及操作元素

先贴一个使用的小技巧：

temp1 = document.getElementById('id1');
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元素也可以获得这些函数：

HTMLElement.prototype.prev = function ()
{
    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的库，由编写的为两个不支持HTMLElement的浏览器提供了访问HTMLElement的方法。[]

但是我将这个脚本包含进去之后在IE中仍然不能使用HTMLElement。本人愚笨，没看懂代码，虽然仅仅是请问有谁知道是怎么才能正确使用那个库吗？

根元素：document.documentElement

标准DOM方法

源于两个强大的函数 getElementById 与 getElementsByTagName （注意Element单词的单复数）

可以按以下的封装方法方便地获取元素：

function id(name) {
    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;
    }
}



通过类名查找元素

function hasClass(name, type) {
    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。

function getText(e) {
    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声明中并不回会返回