自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

JavaScript操作DOM的那些坑

作者：佚名
開發(fā) 前端
js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據(jù)實例整理那些大大小小的“坑”。

js在操作DOM中存在著許多跨瀏覽器方面的坑，本文花了我將近一周的時間整理，我將根據(jù)實例整理那些大大小小的“坑”。

DOM的工作模式是：先加載文檔的靜態(tài)內(nèi)容、再以動態(tài)方式對它們進行刷新，動態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。

PS：IE 中的所有 DOM 對象都是以 COM 對象的形式實現(xiàn)的，這意味著 IE 中的 DOM可能會和其他瀏覽器有一定的差異。

Node 接口

 

firstChild 相當(dāng)于 childNodes[0];lastChild 相當(dāng)于childNodes[box.childNodes.length - 1]。

nodeType返回結(jié)點的類型

--元素結(jié)點返回1

--屬性結(jié)點返回2

--文本結(jié)點返回3

innerHTML 和 nodeValue

對于文本節(jié)點，nodeValue 屬性包含文本。

對于屬性節(jié)點，nodeValue 屬性包含屬性值。

nodeValue 屬性對于文檔節(jié)點和元素節(jié)點是不可用的。

兩者區(qū)別

  1. box.childNodes[0].nodeValue = '<strong>abc</strong>';//結(jié)果為：<strong>abc</strong> 
  2.  
  3. abcbox.innerHTML = '<strong>abc</strong>';//結(jié)果為：abc  

nodeName屬性獲得結(jié)點名稱

--對于元素結(jié)點返回的是標記名稱,如：<a herf><a>返回的是"a"

--對于屬性結(jié)點返回的是屬性名稱,如：class="test" 返回的是test

--對于文本結(jié)點返回的是文本的內(nèi)容

tagName

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

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

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

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

  1. document.getElementsByTagName('li');//獲取所有 li 元素，返回數(shù)組 
  2.  
  3. document.getElementsByTagName('li')[0];//獲取第一個 li 元素，HTMLLIElement 
  4.  
  5. document.getElementsByTagName('li').item(0);//獲取第一個 li 元素，HTMLLIElement 
  6.  
  7. document.getElementsByTagName('li').length;//獲取所有 li 元素的數(shù)目  

節(jié)點的絕對引用：

返回文檔的根節(jié)點：document.documentElement

返回當(dāng)前文檔中被擊活的標簽節(jié)點：document.activeElement

返回鼠標移出的源節(jié)點：event.fromElement

返回鼠標移入的源節(jié)點：event.toElement

返回激活事件的源節(jié)點：event.srcElement

節(jié)點的相對引用：(設(shè)當(dāng)前對節(jié)點為node)

返回父節(jié)點：node.parentNode || node.parentElement(IE)

返回子節(jié)點集合(包含文本節(jié)點及標簽節(jié)點)：node.childNodes

返回子標簽節(jié)點集合：node.children

返回子文本節(jié)點集合：node.textNodes

返回第一個子節(jié)點：node.firstChild

返回最后一個子節(jié)點：node.lastChild

返回同屬下一個節(jié)點：node.nextSibling

返回同屬上一個節(jié)點：node.previousSibling

節(jié)點信息

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

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

創(chuàng)建新節(jié)點

createDocumentFragment()--創(chuàng)建文檔碎片節(jié)點

createElement(tagname)--創(chuàng)建標簽名為tagname的元素

createTextNode(text)--創(chuàng)建包含文本text的文本節(jié)點

獲取鼠標點擊事件的位置

 

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

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

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

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

問題三：

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

其余參照：http://segmentfault.com/a/1190000002559158#articleHeader11

參照表

(+為支持，-為不支持)：

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/embedded/result/

 

offsetLeft和style.left區(qū)別

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

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

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

getComputedStyle與currentStyle

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

getComputedStyle(obj , false ) 是支持 w3c (FF12、chrome 14、safari)：在FF新版本中只需要第一個參數(shù)，即操作對象，第二個參數(shù)寫“false”也是大家通用的寫法，目的是為了兼容老版本的火狐瀏覽器。

缺點:在標準瀏覽器中正常，但在IE6/7/8中不支持

  1. window.onload=function(){ 
  2.  
  3.     var oBtn=document.getElementById('btn'); 
  4.  
  5.     var oDiv=document.getElementById('div1'); 
  6.  
  7.   
  8.  
  9.     oBtn.onclick=function(){ 
  10.  
  11.         //alert(oDiv.style.width); //寫在樣式表里無法讀取，只能得到寫在行內(nèi)的 
  12.  
  13.         //alert(getComputedStyle(oDiv).width); //適用于標準瀏覽器       IE6、7、8不識別 
  14.  
  15.         //alert(oDiv.currentStyle.width); //適用于IE瀏覽器，標準瀏覽器不識別 
  16.  
  17.         if(oDiv.currentStyle){ 
  18.  
  19.             alert(oDiv.currentStyle.width); 
  20.  
  21.         }else{ 
  22.  
  23.             alert(getComputedStyle(oDiv).width); 
  24.  
  25.         } 
  26.  
  27.   
  28.  
  29.     }; 
  30.  
  31. };  

取消表單提交

  1. <script type="text/javascript"> 
  2.  
  3.     function listenEvent(eventObj,event,eventHandler){ 
  4.  
  5.         if(eventObj.addEventListener){ 
  6.  
  7.             eventObj.addEventListener(event,eventHandler,false); 
  8.  
  9.         }else if(eventObj.attachEvent){ 
  10.  
  11.             event = "on" + event; 
  12.  
  13.             eventObj.attachEvent(event,eventHandler); 
  14.  
  15.         }else{ 
  16.  
  17.             eventObj["on" + event] = eventHandler; 
  18.  
  19.         } 
  20.  
  21.     } 
  22.  
  23.   
  24.  
  25.     function cancelEvent(event){ 
  26.  
  27.         if(event.preventDefault){ 
  28.  
  29.             event.preventDefault();//w3c 
  30.  
  31.         }else{ 
  32.  
  33.             event.returnValue = true;//IE 
  34.  
  35.         } 
  36.  
  37.     } 
  38.  
  39.   
  40.  
  41.     window.onload = function () { 
  42.  
  43.         var form = document.forms["picker"]; 
  44.  
  45.         listenEvent(form,"submit",validateFields); 
  46.  
  47.     }; 
  48.  
  49.   
  50.  
  51.     function validateFields(evt){ 
  52.  
  53.         evt = evt ? evt : window.event; 
  54.  
  55.         ... 
  56.  
  57.         if(invalid){ 
  58.  
  59.             cancelEvent(evt); 
  60.  
  61.         } 
  62.  
  63.     } 
  64.  
  65. </script>  

確定瀏覽器窗口的尺寸

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

  1. <script type="text/javascript"> 
  2.  
  3.     function size(){ 
  4.  
  5.         var w = 0, h=0; 
  6.  
  7.   
  8.  
  9.         if(!window.innerWidth){ 
  10.  
  11.             w = (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth); 
  12.  
  13.   
  14.  
  15.             h = (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight); 
  16.  
  17.         }else{ 
  18.  
  19.             w = window.innerWidth; 
  20.  
  21.             h = window.innerHeight; 
  22.  
  23.         } 
  24.  
  25.         return {width:w,height:h}; 
  26.  
  27.     } 
  28.  
  29.   
  30.  
  31.     console.log(size());//Object { width: 1366, height: 633 } 
  32.  
  33. </script>  

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

  1. var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
  2.  
  3. var h=window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;  

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

  1. document.documentElement.clientHeight 
  2.  
  3. document.documentElement.clientWidth  

或者

  1. document.body.clientHeight 
  2.  
  3. document.body.clientWidth  

Document對象的body屬性對應(yīng)HTML文檔的<body>標簽。Document對象的documentElement屬性則表示 HTML文檔的根節(jié)點。

attributes 屬性

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

  1. document.getElementById('box').attributes//NamedNodeMap 
  2.  
  3. document.getElementById('box').attributes.length;//返回屬性節(jié)點個數(shù) 
  4.  
  5. document.getElementById('box').attributes[0]; //Attr，返回最后一個屬性節(jié)點 
  6.  
  7. document.getElementById('box').attributes[0].nodeType; //2，節(jié)點類型 
  8.  
  9. document.getElementById('box').attributes[0].nodeValue; //屬性值 
  10.  
  11. document.getElementById('box').attributes['id']; //Attr，返回屬性為 id 的節(jié)點 
  12.  
  13. document.getElementById('box').attributes.getNamedItem('id'); //Attr  

setAttribute 和 getAttribute

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

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

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

Firefox：只能使用getAttribute()獲取自定義屬性.

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

  1. document.getElementById('box').getAttribute('id');//獲取元素的 id 值 
  2.  
  3. document.getElementById('box').id;//獲取元素的 id 值 
  4.  
  5. document.getElementById('box').getAttribute('mydiv');//獲取元素的自定義屬性值 
  6.  
  7. document.getElementById('box').mydiv//獲取元素的自定義屬性值， IE 不支持非 
  8.  
  9. document.getElementById('box').getAttribute('class');//獲取元素的 class 值，IE 不支持 
  10.  
  11. document.getElementById('box').getAttribute('className');//非 IE 不支持  

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

removeAttribute()方法

removeAttribute()可以移除 HTML 屬性。

document.getElementById('box').removeAttribute('style');//移除屬性

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

跨瀏覽器事件Event對象

  1. <!doctype html> 
  2.  
  3. <html lang="en"> 
  4.  
  5. <head> 
  6.  
  7.     <meta charset="UTF-8"> 
  8.  
  9.     <title>Document</title> 
  10.  
  11.     <style type="text/css"> 
  12.  
  13.        #drop{ 
  14.  
  15.            width: 300px; 
  16.  
  17.            height: 200px; 
  18.  
  19.            background-color: #ff0000; 
  20.  
  21.            padding: 5px; 
  22.  
  23.            border: 2px solid #000000; 
  24.  
  25.        } 
  26.  
  27.        #item{ 
  28.  
  29.            width: 100px; 
  30.  
  31.            height: 100px; 
  32.  
  33.            background-color: #ffff00; 
  34.  
  35.            padding: 5px; 
  36.  
  37.            margin: 20px; 
  38.  
  39.            border: 1px dashed black; 
  40.  
  41.        } 
  42.  
  43.        *[draggable = true]{ 
  44.  
  45.            -moz-user-select: none; 
  46.  
  47.            -webkit-user-select: none; 
  48.  
  49.            cursor: move; 
  50.  
  51.        } 
  52.  
  53.     </style> 
  54.  
  55. </head> 
  56.  
  57. <body> 
  58.  
  59. <div> 
  60.  
  61.     <p>將金黃色的小方塊拖到紅色的大方塊中，不兼容IE7及以下瀏覽器，兼容主流瀏覽器！</p> 
  62.  
  63. </div> 
  64.  
  65. <div id="item" draggable="true"></div> 
  66.  
  67. <div id="drop"></div> 
  68.  
  69. <script type="text/javascript"> 
  70.  
  71.     function listenEvent(target,type,handler){ 
  72.  
  73.         if(target.addEventListener){//w3c 
  74.  
  75.             target.addEventListener(type,handler,false); 
  76.  
  77.         }else if(target.attachEvent){//IE 
  78.  
  79.             type = "on" + type; 
  80.  
  81.             target.attachEvent(type,handler);//IE 
  82.  
  83.         }else{ 
  84.  
  85.             target["on" + type] = handler; 
  86.  
  87.         } 
  88.  
  89.     } 
  90.  
  91.   
  92.  
  93.     //取消事件 
  94.  
  95.     function cancelEvent(e){ 
  96.  
  97.         if(e.preventDefault){ 
  98.  
  99.             e.preventDefault();//w3c 
  100.  
  101.         }else{ 
  102.  
  103.             e.returnValue = false;//IE 
  104.  
  105.         } 
  106.  
  107.     } 
  108.  
  109.     //取消傳遞 
  110.  
  111.     function cancelPropagation(e){ 
  112.  
  113.         if(e.stopPropagation){ 
  114.  
  115.             e.stopPropagation();//w3c 
  116.  
  117.         }else{ 
  118.  
  119.             e.cancelBubble = true;//IE 
  120.  
  121.         } 
  122.  
  123.     } 
  124.  
  125.   
  126.  
  127.     window.onload = function () { 
  128.  
  129.         var target = document.getElementById('drop'); 
  130.  
  131.         listenEvent(target,'dragenter',cancelEvent); 
  132.  
  133.         listenEvent(target,"dragover",dragOver); 
  134.  
  135.         listenEvent(target,'drop', function (evt) { 
  136.  
  137.             cancelPropagation(evt); 
  138.  
  139.             evt = evt || window.event; 
  140.  
  141.             evt.dataTransfer.dropEffect = 'copy'; 
  142.  
  143.             var id = evt.dataTransfer.getData('Text'); 
  144.  
  145.             target.appendChild(document.getElementById(id)); 
  146.  
  147.         }); 
  148.  
  149.   
  150.  
  151.         var item = document.getElementById('item'); 
  152.  
  153.         item.setAttribute("draggable",'true'); 
  154.  
  155.         listenEvent(item,'dragstart', function (evt) { 
  156.  
  157.             evt = evt || window.event; 
  158.  
  159.             evt.dataTransfer.effectAllowed = 'copy'; 
  160.  
  161.             evt.dataTransfer.setData('Text',item.id); 
  162.  
  163.         }); 
  164.  
  165.     }; 
  166.  
  167.   
  168.  
  169.     function dragOver(evt){ 
  170.  
  171.         if(evt.preventDefault) evt.preventDefault(); 
  172.  
  173.         evt = evt || window.event; 
  174.  
  175.         evt.dataTransfer.dropEffect = 'copy'; 
  176.  
  177.         return false; 
  178.  
  179.     } 
  180.  
  181. </script> 
  182.  
  183. </body> 
  184.  
  185. </html>  

dataTransfer 對象

| 屬性 | 描述 |

| ————- |:————-:|

| dropEffect | 設(shè)置或獲取拖曳操作的類型和要顯示的光標類型 |

| effectAllowed | 設(shè)置或獲取數(shù)據(jù)傳送操作可應(yīng)用于該對象的源元素 |

| 方法 | 描述 |

| ————- |:————-:|

| clearData | 通過 dataTransfer 或 clipboardData 對象從剪貼板刪除一種或多種數(shù)據(jù)格式 |

| getData | 通過 dataTransfer 或 clipboardData 對象從剪貼板獲取指定格式的數(shù)據(jù)

| setData | 以指定格式給 dataTransfer 或 clipboardData 對象賦予數(shù)據(jù)

HTML5拖拽的瀏覽器支持

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

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

  1. <img draggable="true" /> 

| 事件 | 描述 |

| ————- |:————-:|

| dragstart | 拖拽事件開始 |

| drag | 在拖動操作上 |

| dragenter | 拖動到目標上，用來決定目標是否接受放置

|dragover | 拖動到目標上，用來決定給用戶的反饋

|drop | 放置發(fā)生

| dragleave| 拖動離開目標

|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.對于阻止元素的默認事件行為，下面是w3c和IE的做法：

e.preventDefault();//w3c

e.returnValue = false;//IE

5.對于取消事件傳播，w3c和IE也有不同的處理機制：

e.stopPropagation();//w3c

e.cancelBubble = true;//IE

跨瀏覽器獲取目標對象

  1. //跨瀏覽器獲取目標對象 
  2.  
  3. function getTarget(ev){ 
  4.  
  5.     if(ev.target){//w3c 
  6.  
  7.         return ev.target; 
  8.  
  9.     }else if(window.event.srcElement){//IE 
  10.  
  11.         return window.event.srcElement; 
  12.  
  13.     } 
  14.  
  15. }  

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

  1. event.target;//w3c 
  2.  
  3. event.srcElement;//IE  

我們可以使用三目運算符來兼容他們：

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

innerText的問題

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

  1. <p id="element"></p> 
  2.  
  3. <script type="text/javascript"> 
  4.  
  5.     if(navigator.appName.indexOf("Explorer") >-1){ 
  6.  
  7.         document.getElementById('element').innerText = "my text"; 
  8.  
  9.     } else{ 
  10.  
  11.         document.getElementById('element').textContent = "my text"; 
  12.  
  13.     } 
  14.  
  15. </script>  

跨瀏覽器獲取和設(shè)置innerText

  1. //跨瀏覽器獲取innerText 
  2.  
  3. function getInnerText(element){ 
  4.  
  5.     return (typeof element.textContent == 'string') ? element.textContent : element.innerText; 
  6.  
  7. } 
  8.  
  9. //跨瀏覽器設(shè)置innerText 
  10.  
  11. function setInnerText(element,text){ 
  12.  
  13.     if(typeof element.textContent == 'string'){ 
  14.  
  15.         element.textContent = text; 
  16.  
  17.     }else{ 
  18.  
  19.         element.innerText = text; 
  20.  
  21.     } 
  22.  
  23. }  

oninput,onpropertychange,onchange的用法

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

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

b)當(dāng)前對象失去焦點(onblur);

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

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

訪問XMLHTTPRequest對象

  1. <script type="text/javascript"> 
  2.  
  3.     if(window.XMLHttpRequest){ 
  4.  
  5.         xhr = new XMLHttpRequest();//非IE 
  6.  
  7.     }else if(window.ActiveXObject){ 
  8.  
  9.         xhr = new ActiveXObject("Microsoft.XMLHttp");//IE 
  10.  
  11.     } 
  12.  
  13. </script>  

禁止選取網(wǎng)頁內(nèi)容

問題：

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時才觸發(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)于鼠標滾輪事件，IE支持mousewheel，火狐支持DOMMouseScroll。

判斷鼠標滾輪是向上還是向下，IE是通過wheelDelta屬性，而火狐是通過detail屬性

事件委托方法 

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

HTML5 的瀏覽器支持情況

  

 

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

查詢操作

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

  1. IE6/7不區(qū)分id和nam在IE6/7下使用getElementById和getElementsByName時會同時返回id或name與給定值相同的元素。由于name通常由后端約定，因此我們在寫JS時，應(yīng)保證id不與name重復(fù)。
  2. IE6/7不支持getElementsByClassName和querySelectorAll 這兩個函數(shù)從IE8開始支持的，因此在IE6/7下，我們實際可以用的只有g(shù)etElementByTagName。
  3. IE6/7不支持getElementsByTagName(‘*’)會返回非元素節(jié)點 要么不用*，要么自己寫個函數(shù)過濾一下。
  4. IE8下querySelectorAll對屬性選擇器不友好 幾乎所有瀏覽器預(yù)定義的屬性都有了問題，盡量使用自定義屬性或者不用屬性選擇器。
  5. IE8下querySelectorAll不支持偽類 有時候偽類是很好用，IE8并不支持，jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是偽類，我們在任何時間都不要使用它們。
  6. IE9的matches函數(shù)不能處理不在DOM樹上的元素只要元素不在dom樹上，一定會返回false，實在不行把元素丟在body里面匹配完了再刪掉吧，當(dāng)然了我們也可以自己寫匹配函數(shù)以避免回流。

 

資料參考：

http://w3help.org/zh-cn/kb/，

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

責(zé)任編輯：龐桂玉 來源： 前端大全
前端JavaScriptDOM
相關(guān)推薦

2010-09-13 17:12:55

JavaScript

2010-09-08 15:47:08

JavsScriptJavaScript

2010-09-08 16:50:11

JavaScriptDOM操作

2010-09-28 14:52:57

JavaScriptDOM

2016-04-06 11:29:58

JavaScriptDOM操作

2010-09-28 15:07:48

JavaScript

2021-09-07 14:35:48

DevSecOps開源項目

2022-05-15 08:13:50

Mysql數(shù)據(jù)庫Mycat

2015-03-12 09:51:09

CoreDataiCloud

2020-04-21 15:18:11

財務(wù)信息化

2021-08-30 10:25:48

JavaScript進階操作前端

2021-08-26 10:25:04

JavaScript進階操作 前端

2022-07-06 07:42:14

DOMHook標簽

2019-12-11 09:23:51

JavaScriptHTMLXML

2010-09-28 15:12:27

Javascript

2017-03-31 10:27:08

推送服務(wù)移動

2017-07-06 11:41:48

CIOIT技術(shù)

2020-05-28 16:15:50

HTTP暗坑前端

2010-09-08 09:59:46

JavaScriptDOM操作

2013-04-12 15:59:33

點贊
收藏

51CTO技術(shù)棧公眾號