欧美激情网,国产欧美亚洲高清,欧美屁股xxxxx,欧美群妇大交群,欧美人与物ⅴideos另类,区二区三区在线 | 欧洲

知識學堂
  • ·聯(lián)系電話:+86.023-75585550
  • ·聯(lián)系傳真:+86.023-75585550
  • ·24小時手機:13896886023
  • ·QQ 咨 詢：361652718 513960520
當前位置 > 首頁 > 知識學堂 > 網(wǎng)站建設知識
js在瀏覽器兼容教程:DOM方法及對象引用
更新時間：2012-05-09 | 發(fā)布人：本站 | 點擊率：477 次

1. getElementById

【分析說明】先來看一組代碼：

<!-- input對象訪問1 -->
<input id="id" type="button"
value="click me" ōnclick="alert(id.value)"/>

　　在Firefox中，按鈕沒反應，在IE中，就可以，因為對于IE來說，一個HTML 元素的 ID 可以直接在腳本中當作變量名來使用，而Firefox中不可以。

【兼容處理】盡量采用W3C DOM 的寫法，訪問對象的時候，用document.getElementById("id") 以ID來訪問對象，且一個ID在頁面中必須是唯一的，同樣在以標簽名來訪問對象的時候，用document.getElementsByTagName("div")[0] 。該方式得到較多瀏覽器的支持。

<!-- input對象訪問2 -->
<input id="id" type="button" value="click me"
onclick="alert(document.getElementById('id').value)" />

2. 集合類對象訪問

【分析說明】IE下，可以使用()或[]獲取集合類對象；Firefox下，只能使用[]獲取集合類對象。如：

document.write(document.forms("formName").src);
//該寫法在IE下能訪問到Form對象的scrc屬性

【兼容處理】將document.forms("formName")改為 document.forms["formName"]。統(tǒng)一使用[]獲取集合類對象。

3. frame的引用

【分析說明】IE可以通過id或者name訪問這個frame對應的window對象，而Firefox只可以通過name來訪問這個frame對應的window對象。

　　例如如果上述frame標簽寫在最上層的window里面的htm里面，那么可以這樣訪問：

IE： window.top.frameId或者window.top.frameName來訪問這個window對象；

Firefox：只能這樣window.top.frameName來訪問這個window對象。

【兼容處理】使用frame的name來訪問frame對象，另外，在IE和Firefox中都可以使用window.document.getElementById(”frameId”)來訪問這個frame對象。

4. parentElement

【分析說明】IE中支持使用parentElement和parentNode獲取父節(jié)點。而Firefox只可以使用parentNode。

【兼容處理】因為firefox與IE都支持DOM，因此統(tǒng)一使用parentNode來訪問父節(jié)點。

5. table操作

【分析說明】IE下table中無論是用innerHTML還是appendChild插入<tr>都沒有效果，而其他瀏覽器卻顯示正常。

【兼容處理】解決的方法是，將<tr>加到table的<tbody>元素中，如下面所示：

var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的內(nèi)容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);

6. 移除節(jié)點removeNode()和removeChild()

【分析說明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。

　　removeNode方法的功能是刪除一個節(jié)點，語法為node.removeNode（false）或者node.removeNode（true），返回值是被刪除的節(jié)點。

　　removeNode（false）表示僅僅刪除指定節(jié)點，然后這個節(jié)點的原孩子節(jié)點提升為原雙親節(jié)點的孩子節(jié)點。

　　removeNode（true）表示刪除指定節(jié)點及其所有下屬節(jié)點。被刪除的節(jié)點成為了孤立節(jié)點，不再具有有孩子節(jié)點和雙親節(jié)點。

【兼容處理】Firefox中節(jié)點沒有removeNode方法，只能用removeChild方法代替，先回到父節(jié)點，在從父節(jié)點上移除要移除的節(jié)點。

node.parentNode.removeChild(node);
// 為了在ie和firefox下都能正常使用，取上一層的父結(jié)點，然后remove。

7. childNodes獲取的節(jié)點

【分析說明】childNodes的下標的含義在IE和Firefox中不同，看一下下面的代碼：

復制代碼
<ul id="main">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<input type=button value="click me!" onclick=
"alert(document.getElementById('main').childNodes.length)">
復制代碼

分別用IE和Firefox運行，IE的結(jié)果是3，而Firefox則是7。Firefox使用DOM規(guī)范，"#text"表示文本（實際是無意義的空格和換行等）在Firefox里也會被解析成一個節(jié)點，在IE里只有有實際意義的文本才會解析成"#text"。

【兼容處理】

方法一，獲取子節(jié)點時，可以通過node.getElementsByTagName()來回避這個問題。但是 getElementsByTagName對復雜的DOM結(jié)構(gòu)遍歷明顯不如用childNodes，因為childNodes能更好的處理DOM的層次結(jié)構(gòu)。

方法二，在實際運用中，F(xiàn)irefox在遍歷子節(jié)點時，不妨在for循環(huán)里加上：

if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。

這樣可以跳過一些文本節(jié)點。

8. Firefox不能對innerText支持

【分析說明】Firefox不支持innerText，它支持textContent來實現(xiàn)innerText，不過textContent沒有像innerText一樣考慮元素的display方式，所以不完全與IE兼容。如果不用textContent，字符串里面不包含HTML代碼也可以用innerHTML代替。也可以用js寫個方法實現(xiàn)。

【兼容處理】通過判斷瀏覽器類型來兼容：

if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
相關文章