学习交流，欢迎转载。转载请注明文章来源：http://www.cnblogs.com/lgjspace/archive/2011/10/13/2218263.html
兼容性：
在 IE6、IE7 中在 table 中添加行和添加列的时候兼容 appendChild() 方法的前提条件和 IE8 不一样，此时需在 tbody 中 appendChild() 才有效，否则会出现“在IE6，IE7中没显示效果”的情况，建议使用 insertRow(Index) 和 insertCell(Index) 方法，其中参数 Index 都为插入到 table（或tr）中的位置顺序，0,1,2,...等代表加到第几行上，-1为加到最后一行上。在 IE 中可以不加该参数，但在 Firefox 中必须得加，否则也不行，这也是兼容性问题。
注意！！！
用 table.tBodies[0].appendChild(tr) 方法添加行的前提条件是：在执行该语句之前必须已经存在或已经创建了一个 table 标签以及其内嵌的 tbody 标签，否则 VS 会报错“0.tBodies[0]为空或无对象”。
兼容性：
FireFox中不兼容innerText属性，只能用innerHTML属性。
经验：
1 <!--由以下例子调试结果可以看出，事件冒泡效果能出现的前提条件是嵌套的标签的触发事件必须是同一种触发条件，例如全部 onclick，或者全部 onkeypress，要不就会跳过“触发条件不一致”的事件，若触发条件之间不同，还要看触发条件的触发优先级，例如 onmousedown 会比 onclick 优先触发，因此会先调用 onmousedown 的事件响应函数，至于之后会不会继续触发 onclick 事件则要看 onmousedown 事件会否打断 onclick 事件的触发条件。-->
2 <body onclick = "alert('body onclick()');">
3 <table onmousemove = "alert('table onmousemove()');">
4 <tbody ondblclick = "alert('tbody ondblclick()');">
5 <tr onkeypress = "alert('tr onkeypress()');">
6 <td onclick = "alert('td onclick()');">
7 <input type = "button" value = "事件冒泡" onclick = "alert('button onclick()');"/>
8 </td>
9 </tr>
10 </tbody>
11 </table>
12 </body>
细节：
Dom 里面的属性名字和 html 里面的属性名字有一部分是不一致的，例如在 html 里面的 class 属性，在 Dom 里面则是 className，例如：可以这样写：<div class = "day"></div>，但不能这样：document.getElementById().class，而必须写成：document.getElementById().className。（这估计是因为防止跟 js 语言本身的关键字冲突。）
注意！！！
在 js 中不能直接调用网页中的 body 标签，也不能写成 window.body 来调用，正确的调用方法是通过 document 属性来调用：document.body。
易错：
单独修改样式的属性使用“style.属性名”。注意在 css 中属性名在 JavaScript 中操作的时候属性名可能不一样，主要集中在那些属性名中含有“-”的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.background；元素样式名是class，在 JavaScript 中是 className 属性；font-size→style.fontSize；margin-top→style.marginTop，例如：单独修改控件的样式 <input type="button" value="AAA" onclick = "this.style.color='red'" />
技巧：
不一定非要用 document 来点出 getElementsByTagName() 方法，也可以通过 document.getElementById() 来取出一个元素对象（假设对象名为 table1），然后用该对象名来点出 getElementById() 方法，例：var table1 = document.getElementById("table123"); var tds = table1.getElementsByTagName("td");在本例中就可以用 table1 来点出 getElementsByTagName() 方法。
细节：
在 js 中改变 td 的背景色：td.style.background = "Red";在 js 中改变 td 的鼠标指针形状：td.style.cursor = "pointer";
细节：
links[i].style.background = "Red"; //注意 background 不能写成 BackGround、Background、BackGroundColor 或 backgroundcolor 等，这些都不起效！！！！
links[i].style.fontSize = "16"; //经对比测试，16 是 fontSize 属性的默认值。同样地，fontSize 不能写成 FontSize、fontsize、Fontsize 等，大小写必须区分清楚！！！！！
细节：
checkbox 的 onchange 事件必须是当 checkbox 的焦点发生改变（即得到焦点或失去焦点）时才被触发！
细节：
在实现“div 的动态跟随鼠标移动效果”中，一定要为 div 加上该属性（即一定要加上div.style.position = "absolute";），否则 div 的跟随鼠标移动的效果就实现不来，该属性是把 div 的位置设为“绝对位置”，即坐标设成是什么 div 就在对应的坐标位置上。