一、屬性相關 我們通常把特征(attribute)和屬性(property)統稱為屬性，但是他們確實是不同的概念，特征(attribute)會表現在HTML文本中，對特征的修改一定會表現在元素的outerHTML中，並且特征只存在於元素節點中；屬性(property)是對於JS對象進行修改，除了瀏覽 ...
一、屬性相關
我們通常把特征(attribute)和屬性(property)統稱為屬性，但是他們確實是不同的概念，
特征(attribute)會表現在HTML文本中，對特征的修改一定會表現在元素的outerHTML中，並且特征只存在於元素節點中；
屬性(property)是對於JS對象進行修改，除了瀏覽器內置的部分特征外，其它的屬性操作並不會影響HTML文本。
其它瀏覽器會區分屬性和特征，而IE67並不會區分它們，在IE67下我們只能用屬性名來刪除特征，雖然這兩個名字很多時候一樣，但總會有不一樣的地方。
2. IE6/7不能通過getAttribute/setAttribute來操作值不為字元串的特征在現代瀏覽器中getAttribute一定會返回HTML中對應的字元串，而IE67返回的結果不可預知，因此在IE67下，我們要用AttributeNode來操作屬性。
3. IE6/7/8不能通過style屬性來獲取CSS文本這個問題應當是IE6/7不區分屬性和特征的後遺症，在獲取style這個屬性的時候，使用elem.style.cssText就好了。
4. IE6/7會解析相對URL成為絕對URL這個問題甚至導致了IE6/7下空的src屬性會產生重覆的請求，可以使用getAttribute('href/src', 4)。
5. 元素特征的預設行為不同這一類的BUG會比較多，比如在一些舊的webkit瀏覽器裡面，checkbox/radio 的預設值為""，而不是on。在一些舊的webkit瀏覽器select的第一個元素不會被選中。
二、樣式操作
通常情況下，樣式包括獲取和設置行內樣式以及獲取元素的計算出的樣式
1. IE支持background-position-x/y而其它瀏覽器不支持background-position-x/y可以用來方便的漸變一個圖片的位置，不支持的情況下我們可以考慮使用解析background-position屬性的來處理。
2. IE6/7不支持opacity屬性可以通過alpha濾鏡來實現相同的效果，不過要記得觸發元素的haslayout。
3. IE6/7/8會錯誤的讓clone產生的節點繼承一些屬性比如background，修改一個兩個同時會改。
4. 不同的獲取計算出樣式的方式IE6/7/8使用elem.currentStyle而其它瀏覽器要用window.getComputedStyle函數。
5.不同的像素化方式像素化指的是將單位不是像素的距離轉換成像素，以方便進行計算。嚴格的說這不是一個相容性問題，但可能全用到。在IE6/7/8中，我們可以使用elem.runtimeStyle配合pixelLeft來進行處理。
而現代瀏覽器可以使用width屬性處理。
在Webkti核心的瀏覽器中，margin-right經常會出錯。
三、查詢操作
查詢通過指的是通過一些特征字元串來找到一組元素，或者判斷元素是不是滿足字元串。
1. IE6/7不區分id和name在IE6/7下使用getElementById和getElementsByName時會同時返回id或name與給定值相同的元素。由於name通常由後端約定，因此我們在寫JS時，應保證id不與name重覆。
2. IE6/7不支持getElementsByClassName和querySelectorAll這兩個函數從IE8開始支持的，因此在IE6/7下，我們實際可以用的只有getElementByTagName。
3. IE6/7不支持getElementsByTagName('*')會返回非元素節點要麼不用*，要麼自己寫個函數過濾一下。
4. IE8下querySelectorAll對屬性選擇器不友好幾乎所有瀏覽器預定義的屬性都有了問題，儘量使用自定義屬性或者不用屬性選擇器。
5. IE8下querySelectorAll不支持偽類有時候偽類是很好用，IE8並不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt並不是偽類，我們在任何時間都不要使用它們。
6. IE9的matches函數不能處理不在DOM樹上的元素只要元素不在dom樹上，一定會返回false，實在不行把元素丟在body裡面匹配完了再刪掉吧，當然了我們也可以自己寫匹配函數以避免迴流。
四. 事件操作
通常一問大家JS的相容性，第一反應都會是attachEvent和addEventListener，但是關於這兩個函數的區別，也還是有很多的細節。
1. 事件作用對象不同addEventListener為事件冒泡到的當前對象，而attachEvent是window。
. 事件參數對象不同一定要註意，attachEvent綁定的函數有參數e，不要再寫e = e || event了，不過兩者的參數屬性有很多的差別，如button還是witch，支持不支持pageY等等。
2. 萬惡的滾輪事件滾輪事件的支持可謂是亂七八糟，規律如下：
IE6-11 chrome mousewheel wheelDetla 下 -120 上 120
firefox DOMMouseScroll detail 下3 上-3
firefox wheel detlaY 下3 上-3
IE9-11 wheel deltaY 下40 上-40
chrome wheel deltaY 下100 上-100
3. 三大不冒泡事件所有瀏覽器的focus/blur事件都不冒泡，萬幸的是大部分瀏覽器支持focusin/focusout事件，不過可惡的firefox連這個都不支持。
IE678下submit事件不冒泡。
IE678下change事件要等到blur時才觸發。
而我們沒有什麼有效的手段去解決這三個問題，只能通過模擬觸發的方式來處理。
這方法在很多瀏覽器下都不安全，一執行哪怕阻止了預設行為，還是會造成頁面跳轉。
五、節點操作
節點操作通常指的是複製、生成一個節點或者移動節點的位置。
1.. innerHTMLIE6/7/8使用innerHTML時必須在前面有一個文本節點，不然會造成很多標簽丟失。另外很多情況下使用innerHTML會造成defaultValue屬性出錯。
2. 無用的tbodyIE6/7/8會給空的table自動加一個空的tbody
3. cloneNode時會複製attachEvent的事件並且除非我們記錄了我們綁定的事件，否則我們沒辦法解綁他們。
本文轉摘自https://www.zhihu.com/question/29072028/answer/43095799
