鱼漂 (一直漂)

最简单的是这样：

动态添加onclick事件：

如果使用匿名函数 function(){}，则如下面所示：

FF中应该使用bObj.click=function() {}

上面的方法其实原理都一样，都是定义 onclick 属性的值。值得注意的是，如果多次定义 obj.onclick，例如：obj.onclick=method1; obj.onclick=method2; obj.onclick=method3，那么只有最后一次的定义obj.onclick=method3才生效，前两次的定义都给最后一次的覆盖掉了。

再看 IE 中的 attachEvent：

执行顺序是 method3 > method2 > method1 ，先进后出，与堆栈中的变量相似。需要注意的是attachEvent 中第一个参数是on开头的，可以是 onclick/onmouseover/onfocus 等等

据说(未经确认验证)在 IE 中使用 attachEvent 后最好再使用 detachEvent 来释放内存

再看看 Firefox 中的的 addEventListener：

可以看到，在 ff 中的执行顺序是 method1 > method2 > method3 ， 刚好与 IE 相反，先进先出。需要注意的是 addEventListener 有三个参数，第一个是不带“on”的事件名称，如 click/mouseover/focus等。

1.在访问某一节点时,如 childNodes[i],要获得这个节点的值,这个值是<![CDATA[]]类型,在IE中,可以这样访问 childNodes[i].text,childNodes[i].firstChild.nodeValue;在Firefox中只能通过childNodes[i].firstChild.nodeValue访问.

2.
<root>
<e>text</e>
</root>

以上的XML,在IE中,<e>是<root>的第一个子元素,可以通过 root.childNodes[0],或root.firstChild访问<e>,但在Firefox中,<e>是<root>的第二个子元素,第一个子元素是换行符,nodeType是#text,如果将代码改为以下:

<root><e>text</e></root>

那么IE与Firefox都是一样的,<e>都是<root>的第一个子元素.

3.insertRow,insertCell
在IE中,insertRow()如果没有指定参数,则在表格后面添加行,默认参数为-1,如果在Firefox中,则一定要指定参数,如insertRow(-1),否则会出错.

4.select options
在IE中,在select.options集合中添加一个option,需要先将创建的option添加到options中,再指定option的text和value的值,在firefox中,则相反,需要先指定值,后添加.
如:
var opt=document.createElement("OPTION");
opt.innerHTML="option";
opt.value="value";
oSelect.options.add(opt);
(IE中报错:参数无效)
以上代码在IE中运行会出错,在Firefox中则正常插入option
以下代码,则在IE中正常,在Firefox中则出错:
var opt=document.createElement("OPTION");
oSelect.options.add(opt);
opt.innerHTML="option";
opt.value="value";
(在Firefox中警告： ID/NAME 所引用的元素位于全局范围。请使用 W3C 的标准形式 document.getElementById() 。)

5.attributes
在IE中,访问某个元素(element)的属性(attributes)时,是通过索引来读取的,即你要知道你要读取的属性是在哪个位置,如:<tag name="li" type="elment" />,如你要读取属性 type,那么在IE中是通过索引的,即: oTag.attributes[1]。但在Firefox中可以用属性名来索引，如 oTag.attributes["type"] 。如果想通过名字来读取属性，那么可以用attributes的方法 getNamedItem,如前面，读取 type 属性的值，可以这样： oTag.attributes.getNamedItem("type").value

6.Opacity(透明度)
在IE或Firefox中都可以设置元素的透明度,最低透明度是0%,最高是100%,在IE中设置元素的透明度是通过元素的style.filter="alpha(opacity=30)" 来设置的,而firefox是通过style.MozOpacity设置的,而且设置的值有点不同,IE是通过百份值,如80(即80%),而firefox对应的值是 .8 (对应80%) 。

需要注意的是：

1.element要用getElementById or ByTagName来得到，

2.setAttribute("class", vName)中class是指改变"class"这个属性，所以要带引号。

3.IE中要把class改成className,.....IE不认class,所以最好写两句，都用上吧。

W3C DOM - {setAttribute()}

setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色，但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置
Element的class属性在firefox中是行的通的，在IE中却不行。因为使用IE内核的浏览器不认识"class"，要改用"className"；
同样，firefox 也不认识"className"。所以常用的方法是二者兼备：
   element.setAttribute("class", vName);
   element.setAttribute("className", vName);  //for IE

2、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性，简单，很好理解。但是IE不支持，IE并不是不支持setAttribute这个函数，
而是不支持用setAttribute设置某些属性，例如对象属性、集合属性、事件属性，也就是说用setAttribute设置style和onclick这些属性
在IE中是行不通的。为达到兼容各种浏览器的效果，可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); }