西红柿爱番茄

2010-6-29 update

判断是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]