document.getElementByTagName(tagName)：返回一個數(shù)組，包含對這些結(jié)點(diǎn)的引用     

getElementsByTagName()方法將返回一個對象數(shù)組 HTMLCollection(NodeList)，這個數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表。

document.getElementsByTagName("*");//獲取所有元素

PS：IE 瀏覽器在使用通配符的時(shí)候，會把文檔最開始的 html 的規(guī)范聲明當(dāng)作第一個元素節(jié)點(diǎn)。

document.getElementsByTagName("li");//獲取所有 li 元素，返回?cái)?shù)組
document.getElementsByTagName("li")[0];//獲取第一個 li 元素，HTMLLIElement
document.getElementsByTagName("li").item(0);//獲取第一個 li 元素，HTMLLIElement
document.getElementsByTagName("li").length;//獲取所有 li 元素的數(shù)目

返回文檔的根節(jié)點(diǎn)：document.documentElement
返回當(dāng)前文檔中被擊活的標(biāo)簽節(jié)點(diǎn)：document.activeElement
返回鼠標(biāo)移出的源節(jié)點(diǎn)：event.fromElement
返回鼠標(biāo)移入的源節(jié)點(diǎn)：event.toElement
返回激活事件的源節(jié)點(diǎn)：event.srcElement

返回父節(jié)點(diǎn)：node.parentNode || node.parentElement（IE）
返回子節(jié)點(diǎn)集合（包含文本節(jié)點(diǎn)及標(biāo)簽節(jié)點(diǎn)）：node.childNodes
返回子標(biāo)簽節(jié)點(diǎn)集合：node.children
返回子文本節(jié)點(diǎn)集合：node.textNodes
返回第一個子節(jié)點(diǎn)：node.firstChild
返回最后一個子節(jié)點(diǎn)：node.lastChild
返回同屬下一個節(jié)點(diǎn)：node.nextSibling
返回同屬上一個節(jié)點(diǎn)：node.previousSibling 

是否包含某節(jié)點(diǎn)：node.contains()

是否有子節(jié)點(diǎn)node.hasChildNodes() 

createDocumentFragment()－－創(chuàng)建文檔碎片節(jié)點(diǎn)
createElement(tagname)－－創(chuàng)建標(biāo)簽名為tagname的元素
createTextNode(text)－－創(chuàng)建包含文本text的文本節(jié)點(diǎn)

document.onclick = mouseClick;

function mouseClick(ev){
    ev = ev || window.event;//window.event用來兼容IE
    var x = 0; var y = 0;

    if(ev.pageX){
        x = ev.pageX;
        y = ev.pageY;
    }else if(ev.clientX){
        var offsetX = 0 , offsetY = 0;
        if(document.documentElement.scrollLeft){
            offsetX = document.documentElement.scrollLeft;
            offsetY = document.documentElement.scrollTop;
        }else if(document.body){
            offsetX = document.body.scrollLeft;
            offsetY = document.body.scrollTop;
        }
        x = ev.clientX + offsetX;
        y = ev.clientY + offsetY;
    }
    alert("你點(diǎn)擊的位置是 x="+ x + " y=" + y);
}

以下所描述的屬性在chrome和Safari 都很給力的支持了。

問題一：Firefox，Chrome、Safari和IE9都是通過非標(biāo)準(zhǔn)事件的pageX和pageY屬性來獲取web頁面的鼠標(biāo)位置的。pageX/Y獲取到的是觸發(fā)點(diǎn)相對文檔區(qū)域左上角距離，以頁面為參考點(diǎn)，不隨滑動條移動而變化

問題二：在IE 中，event 對象有 x, y 屬性（事件發(fā)生的位置的 x 坐標(biāo)和 y 坐標(biāo)）火狐中沒有。在火狐中，與event.x 等效的是 event.pageX。event.clientX 與 event.pageX 有微妙的差別（當(dāng)整個頁面有滾動條的時(shí)候），不過大多數(shù)時(shí)候是等效的。

offsetX:IE特有，chrome也支持。鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder,可能出現(xiàn)負(fù)值

問題三：
scrollTop為滾動條向下移動的距離，所有瀏覽器都支持document.documentElement。

其余參照：http://segmentfault.com/a/119...

（+為支持，-為不支持）：

offsetX/offsetY：W3C- IE+ Firefox- Opera+ Safari+ chrome+

x/y：W3C- IE+ Firefox- Opera+ Safari+ chrome+

layerX/layerY：W3C- IE- Firefox+ Opera- Safari+ chrome+

pageX/pageY：W3C- IE- Firefox+ Opera+ Safari+ chrome+

clientX/clientY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

screenX/screenY：W3C+ IE+ Firefox+ Opera+ Safari+ chrome+

查看下方DEMO：
你會發(fā)現(xiàn)offsetX在Firefox下是undefined，在chrome和IE則會正常顯示。

https://jsfiddle.net/f4am208m...

1.style.left返回的是字符串，比如10px。而offsetLeft返回的是數(shù)值，比如數(shù)值10

2.style.left是可讀寫的，offsetLeft是只讀的

3.style.left的值需要事先定義(在樣式表中定義無效，只能取到在html中定義的值)，否則取到的值是空的

getComputedStyle()接受兩個參數(shù)：要取得計(jì)算樣式的元素和一個偽元素，如果不需要偽元素，則可以是null。然而，在IE中，并不支持getComputedStyle，IE提供了currentStyle屬性。

getComputedStyle(obj , false ) 是支持 w3c (FF12、chrome 14、safari)：在FF新版本中只需要第一個參數(shù)，即操作對象，第二個參數(shù)寫“false”也是大家通用的寫法，目的是為了兼容老版本的火狐瀏覽器。
缺點(diǎn):在標(biāo)準(zhǔn)瀏覽器中正常，但在IE6/7/8中不支持

 window.onload=function(){
    var oBtn=document.getElementById("btn");
    var oDiv=document.getElementById("div1");

    oBtn.onclick=function(){
        //alert(oDiv.style.width); //寫在樣式表里無法讀取，只能得到寫在行內(nèi)的
        //alert(getComputedStyle(oDiv).width); //適用于標(biāo)準(zhǔn)瀏覽器       IE6、7、8不識別
        //alert(oDiv.currentStyle.width); //適用于IE瀏覽器，標(biāo)準(zhǔn)瀏覽器不識別
        if(oDiv.currentStyle){
            alert(oDiv.currentStyle.width);
        }else{
            alert(getComputedStyle(oDiv).width);
        }

    };
};

對于主流瀏覽器來說，比如IE9、Firefox，Chrome和Safari，支持名為innerWidth 和 innerHeight的窗口對象屬性，它返回窗口的視口區(qū)域，減去任何滾動條的大小。IE不支持innerWidth 和 innerHeight

實(shí)用的 JavaScript 方案（涵蓋所有瀏覽器）：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;

對于 IE 6、7、8的方案如下：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示 HTML文檔的根節(jié)點(diǎn)。

attributes 屬性返回該節(jié)點(diǎn)的屬性節(jié)點(diǎn)集合。

document.getElementById("box").attributes//NamedNodeMap
document.getElementById("box").attributes.length;//返回屬性節(jié)點(diǎn)個數(shù)
document.getElementById("box").attributes[0]; //Attr，返回最后一個屬性節(jié)點(diǎn)
document.getElementById("box").attributes[0].nodeType; //2，節(jié)點(diǎn)類型
document.getElementById("box").attributes[0].nodeValue; //屬性值
document.getElementById("box").attributes["id"]; //Attr，返回屬性為 id 的節(jié)點(diǎn)
document.getElementById("box").attributes.getNamedItem("id"); //Attr

在IE中是不認(rèn)識class屬性的，需改為className屬性，同樣，在Firefox中，也是不認(rèn)識className屬性的，Firefox只認(rèn)識class屬性，所以通常做法如下：

element.setAttribute(class, value);  //for firefox
element.setAttribute(className, value);  //for IE

IE：可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性
Firefox：只能使用getAttribute()獲取自定義屬性.

解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性

document.getElementById("box").getAttribute("id");//獲取元素的 id 值
document.getElementById("box").id;//獲取元素的 id 值
document.getElementById("box").getAttribute("mydiv");//獲取元素的自定義屬性值
document.getElementById("box").mydiv//獲取元素的自定義屬性值， IE 不支持非
document.getElementById("box").getAttribute("class");//獲取元素的 class 值，IE 不支持
document.getElementById("box").getAttribute("className");//非 IE 不支持

PS：在 IE7 及更低版本的IE瀏覽器中，使用 setAttribute()方法設(shè)置 class 和 style 屬性是沒有效果的，雖然 IE8 解決了這個 bug，但還是不建議使用。

removeAttribute()可以移除 HTML 屬性。
document.getElementById("box").removeAttribute("style");//移除屬性

PS：IE6 及更低版本不支持 removeAttribute()方法。

    
    
    



    
將金黃色的小方塊拖到紅色的大方塊中，不兼容IE7及以下瀏覽器，兼容主流瀏覽器！

| 屬性 | 描述 |
| ------------- |:-------------:|
| dropEffect | 設(shè)置或獲取拖曳操作的類型和要顯示的光標(biāo)類型 |
| effectAllowed | 設(shè)置或獲取數(shù)據(jù)傳送操作可應(yīng)用于該對象的源元素 |

| 方法 | 描述 |
| ------------- |:-------------:|
| clearData | 通過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數(shù)據(jù)格式 |
| getData | 通過 dataTransfer 或 clipboardData 對象從剪貼板獲取指定格式的數(shù)據(jù)
| setData | 以指定格式給 dataTransfer 或 clipboardData 對象賦予數(shù)據(jù)

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放

為了使元素可拖動，需把 draggable 屬性設(shè)置為 true ：

| 事件 | 描述 |
| ------------- |:-------------:|
| dragstart | 拖拽事件開始 |
| drag | 在拖動操作上 |
| dragenter | 拖動到目標(biāo)上，用來決定目標(biāo)是否接受放置
|dragover | 拖動到目標(biāo)上，用來決定給用戶的反饋
|drop | 放置發(fā)生
| dragleave| 拖動離開目標(biāo)
|dragend | 拖動操作結(jié)束

上述代碼的一些瀏覽器兼容性：

1.為了兼容IE，我們將`window.event`賦給 `evt`，其他瀏覽器則會正確將接收到的`event`對象賦給`evt`。
2.w3c使用addEventListener來為事件元素添加事件監(jiān)聽器，而IE則使用attachEvent。addEventListener為事件冒泡到的當(dāng)前對象，而attachEvent是window
3.對于事件類型，IE需要加`on + type`屬性，而其他瀏覽器則不用
4.對于阻止元素的默認(rèn)事件行為，下面是w3c和IE的做法：

    e.preventDefault();//w3c   
    e.returnValue = false;//IE
    
5.對于取消事件傳播，w3c和IE也有不同的處理機(jī)制：
    e.stopPropagation();//w3c
    e.cancelBubble = true;//IE

//跨瀏覽器獲取目標(biāo)對象
function getTarget(ev){
    if(ev.target){//w3c
        return ev.target;
    }else if(window.event.srcElement){//IE
        return window.event.srcElement;
    }
}  

對于獲取觸發(fā)事件的對象，w3c和IE也有不同的做法：

event.target;//w3c
event.srcElement;//IE       

我們可以使用三目運(yùn)算符來兼容他們：

obj = event.srcElement ? event.srcElement : event.target;

innerText在IE中能正常工作，但是innerText在FireFox中卻不行。

//跨瀏覽器獲取innerText
function getInnerText(element){
    return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
 
//跨瀏覽器設(shè)置innerText
function setInnerText(element,text){
    if(typeof element.textContent == "string"){
        element.textContent = text;
    }else{
        element.innerText = text;
    }
}    

onchange觸發(fā)事件必須滿足兩個條件：

a）當(dāng)前對象屬性改變，并且是由鍵盤或鼠標(biāo)事件激發(fā)的（腳本觸發(fā)無效）

b）當(dāng)前對象失去焦點(diǎn)(onblur)；

onpropertychange的話，只要當(dāng)前對象屬性發(fā)生改變，都會觸發(fā)事件，但是它是IE專屬的；

oninput是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點(diǎn)不同，它綁定于對象時(shí)，并非該對象所有屬性改變都能觸發(fā)事件，它只在對象value值發(fā)生改變時(shí)奏效。

問題：  
FF需要用CSS禁止，IE用JS禁止  

解決方法：  
IE: obj.onselectstart = function() {return false;}  
FF: -moz-user-select:none;   

所有瀏覽器的focus/blur事件都不冒泡，萬幸的是大部分瀏覽器支持focusin/focusout事件，不過可惡的firefox連這個都不支持。

IE6、7、8下 submit事件不冒泡。
IE6、7、8下 change事件要等到blur時(shí)才觸發(fā)。

滾輪事件的支持可謂是亂七八糟，規(guī)律如下：

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  

關(guān)于鼠標(biāo)滾輪事件，IE支持mousewheel，火狐支持DOMMouseScroll。
判斷鼠標(biāo)滾輪是向上還是向下，IE是通過wheelDelta屬性，而火狐是通過detail屬性

  
//事件委托方法  
IE：document.body.onload = inject; //Function inject()在這之前已被實(shí)現(xiàn)  
FF：document.body.onload = inject();   

來源地址：http://fmbip.com/litmus/

查詢通過指的是通過一些特征字符串來找到一組元素，或者判斷元素是不是滿足字符串。

1. IE6/7不區(qū)分id和nam
在IE6/7下使用getElementById和getElementsByName時(shí)會同時(shí)返回id或name與給定值相同的元素。由于name通常由后端約定，因此我們在寫JS時(shí)，應(yīng)保證id不與name重復(fù)。

2. IE6/7不支持getElementsByClassName和querySelectorAll   
這兩個函數(shù)從IE8開始支持的，因此在IE6/7下，我們實(shí)際可以用的只有g(shù)etElementByTagName。

3. IE6/7不支持getElementsByTagName("*")會返回非元素節(jié)點(diǎn)    
要么不用*，要么自己寫個函數(shù)過濾一下。

4. IE8下querySelectorAll對屬性選擇器不友好    
幾乎所有瀏覽器預(yù)定義的屬性都有了問題，盡量使用自定義屬性或者不用屬性選擇器。

5. IE8下querySelectorAll不支持偽類    
有時(shí)候偽類是很好用，IE8并不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是偽類，我們在任何時(shí)間都不要使用它們。

6. IE9的matches函數(shù)不能處理不在DOM樹上的元素
只要元素不在dom樹上，一定會返回false，實(shí)在不行把元素丟在body里面匹配完了再刪掉吧，當(dāng)然了我們也可以自己寫匹配函數(shù)以避免回流。    

資料參考：
http://w3help.org/zh-cn/kb/，

http://www.zhihu.com/question...