query根据CSS规则来查询DOM，提供了基础的CSS选择符：

tag,.class,#id,[attr],tag[attr],tag[attr="value"]...

在测试跟jquery的查询速度比较的时候，再添加了对querySelectorAll（语法是：baseElement.querySelectorAll(selector)，这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点的，别以为只是document而已）的支持。编写的代码中加入了本人认为不错的编写方式，如果你对阅读代码有兴趣，那就看看吧，欢迎提出更好的方式(如果这里显得难看了，就自己下载来看：query.js)：

[javascript]
;(function(g){
var D = document,
_tag = function(tag,p){
return p.getElementsByTagName(tag || "*");
};
var _queryMethod = {
"#":function(q){
var bits = q.split("#"),
tagName = bits[0],
id = bits[1],
element = D.getElementById(id);
return tagName && element.tagName.toLowerCase() != tagName ? [] : [element];
},
".":function(q,p){
var bits = q.split("."),
tagName = bits[0],
cn=bits[1],
elems = null,
returnEl = [],
index = 0;
for(var i=0,l = p.length;i<l;i++){
elems = _tag(tagName,p[i]);
var tmp = null;
for(var j =0,m = elems.length;j<m;j++){
if(!/\S/.test((tmp = elems[j]).nodeValue)) continue;
if(new RegExp("\\b"+cn+"\\b").test(tmp.className)){
returnEl[index++] = tmp;
}
}
}
return returnEl;
},
"tag":function(q,p){
var found,returnEl = [],index=0;
q = q;
for(var i=0,l=p.length;i<l;i++){
found = _tag(q,p[i]);
for(var j =0,m=found.length;j<m;j++){
returnEl[index++] = found[j];
}
}
return returnEl;
},
"attr":function(operation,tag,attr,attrValue,p){
var found =[],returnEl = [],index=fIndex=0;

for(var i=0,l=p.length;i<l;i++){
var tmp = _tag(tag,p[i]);
for(var j=0,m=tmp.length;j<m;j++){
found[index++]=tmp[j];
}
}

//不错吧？ ^_^
var checkFn = {
‘=’:function(e) { return (e.getAttribute(attr) == attrValue); },
‘~’:function(e) { return (e.getAttribute(attr).match(new RegExp(‘\\b’+attrValue+’\\b’))); },
‘|’:function(e) { return (e.getAttribute(attr).match(new RegExp(‘^’+attrValue+’-?’))); },
‘^’:function(e) { return (e.getAttribute(attr).indexOf(attrValue) == 0); },
‘$’:function(e) { return (e.getAttribute(attr).lastIndexOf(attrValue) == e.getAttribute(attr).length – attrValue.length); },
‘*’:function(e) { return (e.getAttribute(attr).indexOf(attrValue) > -1); },
‘a’:function(e) { return e.getAttribute(attr);}
}[operation];

for(var i=0,l=found.length;i<l;i++){
if(checkFn(found[i])){
returnEl[fIndex++] = found[i];
}
}
return returnEl;
}
}

//处理每一个token
var _querySelector = function(q,p){
var elements = /#/.test(q) ? _queryMethod["#"](q) : /\./.test(q) ? _queryMethod["."](q,p) : [];
if(elements.length) return elements;
if(!elements.length && q.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)){
return _queryMethod["attr"](RegExp.$3 || "a",RegExp.$1,RegExp.$2,RegExp.$4,p);
}
if(!elements.length){
return _queryMethod["tag"](q,p);
}
return elements;
}

var _query = function(q){
if(document.querySelectorAll){return document.querySelectorAll(q);}
var tokens = q.split(‘ ‘),token,elems=[D];
for(var i=0,l=tokens.length;i<l;i++){
elems=_querySelector( tokens[i],elems);
}
return elems;
}
g.query=_query || {};
})(this);
[/javascript]
我很经得起批的……《测试示例》

在第一种实现方案中，如果图片的父元素设置了padding、margin之后，就会使得FF、Chrome等逻辑判断失误，而IE还完好。

———————-纠错分界线————————–

说“图片导航”或许很迷糊，我也迷糊不知道怎么描述，就是类似于Google、QQ空间、百度图片搜索中的在图片中出现上下箭头或者左右箭头来指示下一个和上一个图片的功能。昨天同事问到我这方面的实现方式，也就暂时想了两种。

之前查看过Google的方法是在图片上添加两个HTML元素作为逻辑操作对象（包括切换鼠标样式、点击事件等），这样就显得比较复杂了，需要确定图片的在页面中的位置、图片的宽高、之后还要判断鼠标的位置……QQ空间的相册导航，是在图片本身来操作逻辑的，这同我第一种方案很类似，而百度图片搜索结果页中图片导航是在图片的父元素中做逻辑的，这样就避免了图片大小对导航的干扰的问题（主要是如果图片太小，在图片上做导航就显得迷糊了，特别是鼠标的样式切换）。下面来说说我的方法。

第一种，直接在图片上做逻辑。事件参数e有这么两个参数，在FF等浏览器下是layerX,layerY，在IE下是offsetX,offsetY，用于在一个DOM元素触发事件的时候，鼠标在该元素上的偏移量。这个是好方法啊，在结合offsetHeight和offsetWidth，就可以直接在图片上做判断了，给图片添加mousemove、onclick事件来处理鼠标样式切换、点击事件逻辑等等。《测试用例1》，可是这种方法的一个缺点是：在IE6下，当鼠标移动到鼠标的时候，会默认的弹出一个框，很杯具。

第二中方式就是根据上面的技巧，在图片上覆盖一个div（或者其他的能覆盖的元素都成），覆盖就得获取到图片在页面中的坐标以及宽高了，通过offsetLeft和offsetTop可以方便的得到，兼容性也还好，对于不是非常复杂的DOM结构和CSS布局，应该都是没啥问题的。《测试用例》，这样就避免了IE6下弹出框的问题。不过这样代码就得写多几行了。

具体的实现方式可以查看上面给出了两个实例。

判断是IE6、7浏览器的方法还可以通过检测：document.documentElement.hasAttribute这个方法是否存在来判断。IE6、7下document.documentElement是不支持hasAttribute方法的；IE8、FF、Chrome、Opera等都支持。这样就可以避免丑陋的@cc_on判断方式了，不过在性能上，或许还是会@cc_on比较好。

——————–完美的分界线——————-
昨天想起了之前在口碑的时候就想写的一个代码：把HTML标签名作为方法来连缀性的插入元素，比如下面的操作方式：
[javascript]
var root=Node("div","",{"id":"test","class":"div","onclick":"alert(this.innerHTML);",
"style":"background-color:#f00;"})
.h1("P Element in DIV Element",{"class":"p"})
.em("EM Element",{"class":"em"}).appendTo(document.body);
//==========================================
Node("div","",{"class":"div","onclick":"alert(this.innerHTML);"})
.h1("P Element in DIV Element",{"class":"p"})
.em("EM Element",{"class":"em"}).appendTo(root);
[/javascript]

如上代码所示，将HTML的标签名作为方法，在Node方法执行的时候就动态生成一个DOM元素，之后调用的HTML标签名形式的方法会一步一步的appendChild到前面的一个DOM元素中，调用每一个HTML标签名形式的方法都会动态生成一个相应的DOM元素，最后调用appendTo或者beforeTo方法将Node方法动态生成的DOM元素插入到这两个方法参数指定的父元素中。同时，还可以设置DOM元素的attribute、style、text。是不是有点意思呢？^_^

但是在写这个代码的时候，遇到的最大困难，就是setAttribute了，一来IE6、7对一些属性使用了不同的DOM属性名，在设置style的时候，也存在cssText和直接setAttribute style的差别，这些都是比较纠结的。幸好，下面的几个知识点可以解决大部分的冲突：

1. 利用IE下setAttribute方法的第三个参数，可以解决IE6、7下对于一些属性大小写的差别。《setAttribute Method》、《setAttribute()方法参数问题》
2. 对于一些IE6、7跟其他浏览器的属性名完全不同（比如：class、for、checked、selected），这可以通过一个字面量对象来纠正，可以看下面我写的源码的解决办法。
3. IE6、7无法给onxxx属性（事件）直接赋值为字符串，需要赋给它函数才行。这个就需要做判断了，本人使用了@cc_on来判断IE的版本，并通过new Function的方式给IE6、7设置onxxx这样的属性。
4. 同时，还有一个小陷阱，在HTML标签中直接声明onxxx属性的时候，不能够使用匿名函数的方式，比如:onclick=”function(){alert(‘hello’);}”，这将会造成语法错误。

下面是本人写的Node代码，《测试示例》^_^:
[javascript]
;(function(w) {
var D = document,_node = null,_root = null,
special = {
"class": "className",
"checked": "defaultChecked",
"selected": "defaultSelected",
"for": "htmlFor"
},
flag =/*@cc_on @if (@_jscript_version <= 5.7)!@end @*/false;

var setStyle = function(elem, s) {
var styles = [];
if (typeof s === "object") {
for (var k in s) {
styles.push(k + ":" + s[k]);
}
s = styles.join(";");
}
return elem.setAttribute("style", s) || (elem.style.cssText = s);
}

var setAttr = function(el, attr) {
var val = "";
for (var key in attr) {
val = attr[key];
if (flag && /on/.test(key)) {
val = new Function(val);
}
key === "style" ? setStyle(el, attr[key]) : el.setAttribute(flag && special[key] || key, val, 0);
}
}

var _HTMLTagMethod = (function(arr) {
var o = {},el = null;
for (var i = 0,l = arr.length; i < l; i++) {
(function(a) {
o[a] = function(t, attr) {
el = D.createElement(a);
setAttr(el, attr || {});
t ? (el.innerHTML = t) : null;
_node.appendChild(el);
_node = el;
return _HTMLTagMethod;
}
})(arr[i]);
}
o.appendTo = function(parent) {
(parent || D.body).appendChild(_root);
return _root;
}
o.beforeTo = function(parent) {
var first = parent.firstChild;
first ? parent.insertBefore(_root, first) : this.appendTo(parent);
return _root;
}
return o;
})(["p", "span", "div", "input", "select", "h1", "h2", "h3", "h4", "h5", "h6", "em", "strong", "small", "iframe", "a", "button", "code", , "li", "ul", "ol", "dl", "dt", "dd", "input", "link", "script", "legend", "form", "table", "tr", "td", "style", "sub", "sup", "pre", "del", "fieldset", "label", "img", "option"]);
/////
//////////////////////////////////////////////////
w.Node = function(tag, t, attr) {
var el = D.createElement(tag);
t ? (el.innerHTML = t) : null;
setAttr(el, attr || {});
_root = el;
_node = el;
return _HTMLTagMethod;
}
})(this);
[/javascript]

Javascript代码优化无非主要围绕：DOM操作、循环、闭包、对象重复出现、对象的声明方式、作用域链、字符串操作、类的声明方式等等。循环、闭包、对象重复出现是从作用域链的角度去优化的；DOM操作主要围绕HTMLCollection、NodeList等来优化；对象的声明方式主要是对象（Object）、数组（Array）、字符串（String）、函数（Function）、正则（RegExp）等内置的对象使用字面量的方式来声明，这个比使用new来实例化相应的对象在性能上要强很多；字符串操作的优化方式主要是通过数组的push和join方法；类的声明方式优化方式主要是分清属性和方法的声明的方式，方法使用prototype的方式来声明；Javascript语言本身的流程操作语句的优化（if、switch、with、eval等等）。

因此，我将Javascript代码优化主要分为六类：DOM“真空”空间、缩短作用域链、字面量声明方式、字符串操作、类声明方式、流程操作语句。下面将逐个叙述：

DOM“真空”空间
DOM“真空”空间这个词或许有些迷惑，举个例子就明白了：当使用removeChild将一个DOM元素从DOM树中删除之后，这个DOM元素并没有彻底消失，它就存在于DOM“真空”空间中，可以通过引用重新调用这个元素，并且对它的操作不会影响DOM文档树。

所以很多对DOM的HTMLCollection、NodeList操作的优化，都是利用了这个“真空”空间，先将元素从DOM树中剥离开来，再对这个元素进行一系列的操作之后，最后再通过appendChild或者insertBefore插入原来位置的DOM树中。这样就使得页面的reflow的次数最小化。比如下面优化的例子：

[javascript]
/**
* Remove an element and provide a function that inserts it into its original position
* @param element {Element} The element to be temporarily removed
* @return {Function} A function that inserts the element into its original position
**/
//removeToInsertLater函数的作用是将element从DOM树中删除，保存于DOM“真空”空间里，同时返回一个闭包函数，用于在对element操作之后将其插回原来的位置。
function removeToInsertLater(element) {
var parentNode = element.parentNode;
var nextSibling = element.nextSibling;
parentNode.removeChild(element);
return function() {
if (nextSibling) {
parentNode.insertBefore(element, nextSibling);
} else {
parentNode.appendChild(element);
}
nextSibling=null; //因为处于闭包中，需要设置为null，断开作用域链，下同。
parentNode=null;
};
}
//接下来我们就可以对element进行一系列的操作，最后插回去
function updateAllAnchors(element, anchorClass) {
var insertFunction = removeToInsertLater(element);
var anchors = element.getElementsByTagName(‘a’);
for (var i = 0, length = anchors.length; i < length; i ++) {
anchors[i].className = anchorClass;
}
insertFunction();
}
[/javascript]

如果所示，将需要操作的DOM元素先从DOM树中剥离开来，对其进行操作，再安插回去，减少了页面reflow的次数，还有一种方式是将HTMLCollection、NodeList对象转换成数组的形式来进行操作，这都是不错的优化方式，可以应用在很多类似的优化案例中。当然了，对DOM的操作，DOM本身提供的API方法也都存在性能问题，使用nextSibling比childNodes快多了、使用item比使用普通的索引慢多了、不同的循环的方式对操作HTMLCollection、NodeList也都存在不同的性能：《雷人的优化HTMLCollection对象的循环操作技巧》，这个将会在下面的循环里叙述。

缩短作用域链
缩短作用域链，说简单点就是尽量使用局部变量来储存外部的对象。对于在循环中重复出现的对象，这个尤其具有优化效果；对于在闭包函数外的对象，当需要在闭包内使用的时候，可以在闭包内声明一个局部变量来储存该对象；还有对DOM元素的length属性、或者在DOM操作的循环中单个DOM元素使用局部变量来储存，也十分具有优化效果。目的就是使得在数据存取的过程中从作用域链中能最快的取出来，而最快的取出来的前提就是需要对象或者变量在作用域链的顶部。经过测试表明：局部变量的存取速度是最快的。所以将作用域外的对象局部引用化，也是不错的优化方式。循环也算是缩短作用域链的一个方面，但是某些方面也不全是，这个跟循环内部的比较和判断有关，具体请浏览《对循环操作的几种优化》。下面举几个例子：

[javascript]
//例子一：将NodeList的length属性缓存起来，这样就可以避免每次重新计算length属性，重新查询一遍DOM树。
var d = document.getElementsByTagName("div");
for(var i=0, l = d.length; i<l; i++){
//code here…
}
//=====================================
//例子二：将每一个DOM元素局部化，因为对每一个DOM元素的操作，都需要在NodeList中去查询这个DOM元素。
var d = document.getElementsByTagName("div");
for(var i=0, l = d.length; i<l; i++){
var item = d[i];
item.className="active";
item.title = "active item";
//……
}
//=====================================
//例子三：储存重复出现的对象或者方法，特别是在循环中。将document.body缓存起来，这样在循环里读取的速度就非常快了。
var b = document.body;
for(var i=0;i<10;i++){
b.appendChild(document.createTextNode("some text"));
}
//=====================================
//例子四：对闭包外的对象或者变量在闭包内局部化。
//msg在setTimeout闭包参数的作用域外
function setupAlertTimeout() {
var msg = ‘Message to alert’;
window.setTimeout(function() { alert(msg); }, 100);
}
//下面这个更快，将变量声明放到闭包内，使得读取速度更快。
function setupAlertTimeout() {
window.setTimeout(function() {
var msg = ‘Message to alert’;
alert(msg);
}, 100);
}
//再来个更快的，这下避免使用闭包来作为setTimeout的参数，使得程序运行更快。
function alertMsg() {
var msg = ‘Message to alert’;
alert(msg);
}
function setupAlertTimeout() {
window.setTimeout(alertMsg, 100);
}
[/javascript]

对于上面例子四中关于闭包的使用，在这里解释一下：闭包非常强大而且使用，但是它也有很多缺陷，比如：是造成很多内存泄漏的罪魁祸首；声明一个闭包比声明一个不是闭包的内部函数更慢，比声明一个静态函数就更慢了。因此得出了上面的结论。

还有，对于缩短作用域链的一个更直白的解释例子如下：

[javascript]
var a = ‘a’;
function createFunctionWithClosure() {
var b = ‘b’;
return function () {
var c = ‘c’;
a;
b;
c;
};
}
var f = createFunctionWithClosure();
f();
[/javascript]

如上所示：当函数f调用的时候，读取a比读取b慢，比读取c又更慢。这就是作用域链的存取速度导致的性能问题，在HTMLCollection、NodeList中更甚。

字面量声明方式
这个字面量的声明方式的优化方式比较简单易懂，就是使用Javascript这门语言所独有的可以使用字面量的形式来声明对象的特点，这些比使用new来实例化响应的内置的对象将消耗更多的性能和时间，而且也不够灵活。比如下面的声明方式：

[javascript]
var obj = {};
var obj2 = {
"name":"supersha"
}
var arr = [];
var arr2 = [1,2];
var reg = /abc/gi;
var fn = function(){
alert("传说中的Hello world");
}
[/javascript]

字符串操作
字符串中的优化已经算是不值得多说了，主要使用数组的push、join方法来时优化。现在来说说使用传统的“+”或者“+=”运算符为啥低效：当使用“+”或者“+=”运算符的时候，内存中先会创建一个变量副本来储存这个连接的结果，之后把结果赋值给“=”号左边的变量或者对象属性，最后销毁这个变量副本，当在循环中通过“+”或者“+=”来连接字符串的时候，就不得不忍受副本变量的创建、赋值、销毁这一连串的操作，如果需要连接的两个字符串比较大的时候，就更难以忍受了。所以，对它的优化，就被无可奈何的提出来了。举个例子：

[javascript]
//例子一：
var veryLongMessage = [
'This is a long string that due to our strict line length limit of',
' characters per line must be wrapped. ',
'% of engineers dislike this rule. The line length limit is for ',
' style purposes, but we do not want it to have a performance impact.',
' So the question is how should we do the wrapping?'
].join();
//=====================================
//例子二：
var strBuilder = ['First 20 fibonacci numbers:'];
for (var i = 0; i < 20; i++) {
strBuilder.push(i, ‘ = ‘, fibonacci(i));
}
var fibonacciStr = strBuilder.join(”);
[/javascript]

类声明方式
类声明方式的优化，主要是利用了prototype原型链的优点，使得类在实例化的时候不需要给每一个实例都声明相同名称的方法或者属性，而是通过prototype原型链来声明方法或者属性，使得每一个类的实例都从原型链共享这个方法或者属性（有些不知道怎么表达，暂且这样吧）。比如下面的例子：

[javascript]
//下面声明类的方式比较糟糕
var Car = function(color,model,owner){
this.color=color;
this.model=model;
this.owner=owner;
this.setColor=function(c){
this.color=c;
}
//….
}
//改进一下下，好多了……
var Car = function(color,model,owner){
this.color=color;
this.model=model;
this.owner=owner;
}
Car.prototype.setColor=function(c){
this.color=c;
}
[/javascript]

流程操作语句
这里所说的流程操作语句主要是if、switch、do while、while、for、try catch，也有with、eval等等。if语句和switch语句之间的衡量是经常会碰到的优化问题：《对Duff策略优化数组操作的疑虑》；循环的优化在上面已经叙述过了；我相信很多叙述有关Javascript性能的文章都建议避免使用with、eval，甚至是try catch语句，因为catch语句会增加作用域链的深度，造成数据读取速度下降的性能问题，更多的细节可以阅读《高性能网站建设进阶指南》和Nicholas C.Zakas著的《High Performance JavaScript》中更详细的叙述。

总结：上面例举了Javascript代码优化的五个基本类别的方式。当然了，Javascript代码优化还远不止上面例子中出现的情况，大到设计模式、Ajax应用，小到还有对if、switch、with、eval等等的优化等等，无处不存在着代码性能优化这些细节问题，但是细化下来，也基本在上面五个类别里了。案例是丰富多彩的，但是本质不变。目的只有一个：让你的代码跑的更快。

延伸阅读：《IE + JavaScript Performance Recommendations – Part 1》，《IE+JavaScript Performance Recommendations Part 2: JavaScript Code Inefficiencies》，《IE+JScript Performance Recommendations Part 3: JavaScript Code Inefficiencies》，《Optimizing JavaScript code》，《Speeding up JavaScript: Working with the DOM》

根据需要，增加了使用和禁用开关模式(右下角)，在页面中直接加载fireTest.js文件即可：
[javascript]
<script src="fireTest.js" type="text/javascript"></script>
[/javascript]

或者直接链接到本站fireTest.js文件：http://www.ilovejs.net/lab/fireTest/fireTest.js
《点击查看测试页面》

///////////////////////////////////////////////////////////////////

昨晚睡觉的时候脑子突然想实现这么个东东 — 类似于firebug的查看DOM元素padding、margin的情况。虽然firebug已经发布了Lite版本，可以在非火狐的浏览器下测试网页的各种信息，但是由于Lite版本是用js实现的，在某些浏览器下（特别是IE下），影响了整体的性能，使用上也不太方便查看。目前各主流浏览器都内置了这项功能，Google Chrome，Safari，Opera，IE8等等都已经有非常强大的开发人员测试工具。

写这个工具一方面是为了方便自己在非火狐浏览器下类似于firebug的查看DOM元素的padding，margin的情况（除了IE6），但是目前还不支持IE6（fuck 框模型hack），日后有时间完善这个。

《点击查看测试页面》

[javascript]
var Style = {
//获取元素最终的样式
getFinalStyle: function(elem, css){
if (window.getComputedStyle) {
return window.getComputedStyle(elem, null)[css];
} else if (elem.currentStyle) {
return elem.currentStyle[css];
} else {
return elem.style[css];
}
},
height: function(elem){
if (this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetHeight || elem.clientHeight;
} else {
//获取隐藏掉的函数的高度，先让它显示，获取到高度之后再隐藏，下同
elem.style.display = "block";
var h = elem.offsetHeight || elem.clientHeight;
elem.style.display = "none";
return h;
}
},
width: function(elem){
if (this.getFinalStyle(elem, "display") !== "none") {
return elem.offsetWidth || elem.clientWidth;
} else {
elem.style.display = "block";
var w = elem.offsetWidth || elem.clientWidth;
elem.style.display = "none";
return w;
}
}
};

//Usage：
onload = function(){
alert(Style.height(document.getElementById("div")));
}
[/javascript]

offsetParent有四个方法是比较常用的：offsetLeft，offsetTop，offsetWidth，offsetHeight。下面我来说明offsetLeft和offsetTop方法的含义。

offsetTop和offsetLeft分别是元素在offsetParent上下文中的水平和垂直偏移量，它在现代浏览器中都比较准确。但是ie6,ie7在计算的时候会多出2个像素的长度,大家可以使用下面提供的函数来测试。下面是封装的几个函数：

[javascript]
//获取DOM元素在可见区域的X坐标
function pageX(elem){
//如果当前元素还存在offsetParent，就递归叠加，下面的同理
return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}
//获取DOM元素在可见区域的Y坐标
function pageY(elem){
return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}
//获取DOM元素相对于parentNode的X坐标
function parentX(elem){
//鉴于有些浏览器对于offsetParent指向不准确的进行判断是否跟元素的parentNode相等，下同。
return elem.offsetParent == elem.parentNode ? elem.offsetLeft : pageX(elem) – pageX(elem.parentNode);
}
//获取DOM元素相对于parentNode的Y坐标
function parentY(elem){
return elem.offsetParent == elem.parentNode ? elem.offsetTop : pageY(elem) – pageY(elem.parentNode);
}
[/javascript]

上面的几个函数在table里面测试在各个浏览器都基本相同（FF，Chrome，Safari，Opera，IE8），可是ie6和ie7会多出2个像素的长度。大家可以自己测试一下：测试页面。

offsetHeight和offsetWidth主要用于获取DOM元素潜在的高度和宽度，比如图片或者一些没有显示声明高度和宽度的DOM元素等等就非常适合。

同时附带一个非常有用的函数，就是用于获取DOM元素的最终样式的getStyle函数，它通过IE的currentStyle以及FF等浏览器的getComputedStyle方法来获取最终样式：

[javascript]
//注意：样式属性的书写格式必须是骆驼型，比如:font-size要写成fontSize
var getStyle = function(el, c){
if (el.currentStyle) { //IE
return el.currentStyle[c];
} else if (window.getComputedStyle) { //W3C
return window.getComputedStyle(el, null)[c];
} else {
return el.style[c];
}
}
[/javascript]

今天有网友说下面简化的版本在IE6下会触发IE6的“终止操作”的bug，测试了一下，确实存在这个问题（问题页面），所以对简化版的DOMReady进行了重构了，使用setInterval代替setTimeout就没事了，很奇怪的问题：

[javascript]
var DOMReady = {
ready: function(){
var that = DOMReady,done = false,init,args = arguments;
//ready之后统一处理函数
init = function(){
if(!done){
done = true;
(typeof args[0] === "function" ? args[0] : function(){})();
}
}
//添加DOMContentLoaded事件的支持
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
}
//使用普通的方式进行检测
var interval = setInterval(function(){
if (document && document.getElementsByTagName && document.getElementById && document.body) {
clearInterval(interval);
init();
}
},20);
}
};
[/javascript]

或者再使用更加强健一点的方式：

[javascript]
var DOMReady = {
ready: function(){
var that = DOMReady,
done = false,
init = typeof arguments[0] === "function" ? arguments[0] : function(){},
u = navigator.userAgent;
if (/webkit/i.test(u)) {
(function(){
var dr = document.readyState;
if (dr == "loaded" || dr == "complete") {
init();
} else {
setTimeout(arguments.callee, 10);
}
})();
}else if (document.addEventListener) { //添加DOMContentLoaded事件的支持
document.addEventListener("DOMContentLoaded", init, false);
}else{
(function(){
var t = document.createElement(‘doc:rdy’);
try {
t.doScroll(‘left’);
init();
t = null;
} catch (e) {
setTimeout(arguments.callee, 0);
}
})();
}
}
};
[/javascript]

=================== 就错线 =====================

在很多javascript库中，检查DOM是否加载完成是非常重要的一个功能模块，它可以被独立出来作为一个模块来供其他对象调用，下面是我提供的一种方式，原理就是使用一个定时器来循环检查document，document.body，document.body.lastChild是否可用，从而证明DOM是否加载完成：

[javascript]
/**
* @author Supersha
* @website http://www.ilovejs.net
*/
var DOMReady = {
done: false,
ID: 0,
fn:null,
ready: function(){
this.fn = typeof arguments[0] === "function" ? arguments[0] : function(){
alert("Argument should be a function.");
};
//添加对Firefox，Opera等支持DOMContentLoaded事件的支持
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", this.fn, false);
return;
}
//持续检查DOM是否加载完成
this.ID = setInterval(this.check(this), 20);
},
check: function(obj){
return function(){
if (obj.done) {
clearInterval(obj.ID);
obj.fn();
} else if (document && document.getElementsByTagName && document.getElementById && document.body) {
obj.done = true;
}
}
}
}
[/javascript]
把DOMReady对象模块添加到其他的功能模块中就可以非常方便的去操作DOM，而无需考虑是否加载完成，比如：
[javascript]
DOMReady.ready(function(){
alert(document.getElementById("div").innerHTML);
});
[/javascript]

################ 即时更新 ####################
利用arguments.callee还能更加精简DOMReady对象的代码：
[javascript]
var DOMReady = {
ready: function(){
DOMReady .fn = typeof arguments[0] === "function" ? arguments[0] : function(){};
(function(){
if (document && document.getElementsByTagName && document.getElementById && document.body) {
DOMReady .fn();
}
else {
//利用arguments.callee获取匿名函数的引用，之后在setTimeout定时器里循环执行
setTimeout(arguments.callee, 20);
}
})();
}
};
[/javascript]