序號 |
操作 |
分類 |
IE (6.0) |
FireFox (2.0) |
Mozilla (1.5) |
當前 瀏覽器 |
備忘 |
1 |
"." |
訪問tag的固有屬性 |
OK |
OK |
OK |
OK |
|
2 |
"." |
訪問tag的使用者定義屬性 eg: <input type="checkbox" myattr="test"> |
OK |
NO |
NO |
OK |
可以用getAttribute函數 替代 |
3 |
obj.getAttribute |
訪問tag的固有屬性 |
OK |
OK |
OK |
OK |
|
4 |
obj.getAttribute |
訪問tag的使用者定義屬性 eg: <input type="checkbox" myattr="test"> |
OK |
OK |
OK |
OK |
|
5 |
document.all |
訪問document的所有子項目 eg:document.all |
OK |
OK |
NO |
OK |
建議用childNodes對象或者getElementById函數實現對應操作。 有人說它不能取Div元素,測試結果是可以,不知道是不是還有其它因素會影響測試結果。 |
6 |
obj.all |
訪問非document元素的所有子項目 eg: document.getElementById("mydiv").all |
OK |
NO |
NO |
OK |
同上 |
7 |
getElementById() |
根據元素的id/name來取得元素。 如果元素只設定name屬性,沒有設定id屬性。 |
OK |
NO |
NO |
OK |
注意:很多元素是沒有name屬性的,eg: td, div,span... |
8 |
變數名 = "" |
隱式定義變數-通過向變數名附值方式定義一個新的變數。 |
OK |
OK |
OK |
OK |
建議:為避免必要的麻煩,顯示定義變數。 eg:var tmp; |
9 |
id |
通過id直接調用對象 eg: test_result_1.innerHTML = "" |
OK |
OK |
NO |
OK |
eval()函數用來執行指令碼,所以向eval函數裡面傳入對象id/name的話,IE同樣會返回對象的引用。 建議用document.getElementById(id)方式調用 注意:因為這個原因,IE中隱式定義的變數不能和HTML中元素的id/name相同。 |
10 |
name |
通過name直接調用對象 eg: test_for_this_name.innerHTML = "" |
OK |
NO |
NO |
OK |
同上/ 原因同7 |
11 |
name |
支援的特殊字元("!",".","@","#","$","<",...) eg: document.getElementsByName("aaaa!page"); |
NO |
OK |
OK |
NO |
其它的字元沒有測試 |
12 |
tr.innerHTML = "" |
設定TR元素的內部HTML指令碼 |
NO |
OK |
OK |
NO |
在IE中,table、tr的innerHTML是唯讀屬性,不能夠對其直接設定。可以通過insertRow/insertCell函數進行設定。 |
13 |
cells對象訪問 |
訪問tr的cells對象 前提:tr元素是被刪除後的tr對象,或者是用cloneNode(true)複製的刪除前的tr對象 |
NO |
OK |
OK |
undefined |
可以將其插入Table再訪問,或者可以用getElementsByTagName函數 對td/th訪問。 刪除後的rows對象不存在這個問題。其它元素? |
14 |
(index) |
訪問集合類對象 eg: document. getElementsByTagName("TD")(0) |
OK |
NO |
NO |
OK |
建議用正式的操作符"[]". |
15 |
obj.toString() |
取得對象的字串"[object 物件類型的名稱]". eg: td == "[object HTMLTableCellElement]" |
NO |
OK |
OK |
NO |
可以省略toString()函數,直接用對象來操作。 註:在IE中返回"[object]"。 |
16 |
obj.class |
定義對象的css式樣/風格。 eg: td.class="XPstyle"; |
NO |
OK |
NO |
- |
無法寫測試代碼,會有編譯錯誤!可以自己用typeof(class) == null來測試一下,沒有異常就在代碼中可以使用。 在HTML指令碼中用class,但是在Javascript中應該用classname(class是JS的保留關鍵字). 注意:用 setAttribute可以把class值設定到對象中去,但是不會被當作css式樣來解析。 |
17 |
const |
保留關鍵字,用於定義常量。 eg:const HOURS = 24; |
NO |
OK |
OK |
- |
暫時只能不使用const。 |
18 |
input.type |
變更input元素的類型 eg: input.type="button"; |
NO |
OK |
OK |
NO |
IE可以初始input元素類型,但是不能變更類型。 如果必須變更,可以用更換input元素的方式。 |
19 |
obj.children |
訪問對象的子項目集合 eg: document.body.children.length; |
OK |
NO |
NO |
OK |
可以用childNodes對象替代。 |
20 |
node.replaceNode |
替換新的節點對象 eg: oldNode.replaceNode(newNode); |
OK |
NO |
NO |
OK |
可以用replaceChild函數替換。 |
21 |
node.removeNode |
刪除已有節點對象 eg.oldNode.removeNode(true); |
OK |
NO |
NO |
OK |
可以用oldNode.parentNode.removeChild(oldNode)方式實現。 |
22 |
node.insertBefore |
在指定節點對象前面插入一個節點對象 document.body.insertBefore(newN, oldN); |
OK |
OK |
OK |
OK |
|
23 |
obj.parentElement |
訪問對象的父元素 eg: document.body.parentElement.id; |
OK |
NO |
NO |
OK |
可以用parentNode對象替代。 |
24 |
obj.childNodes.length |
返回子節點的數量,和tag的數量相同。 eg:document.body.childNodes.length; |
OK |
NO |
NO |
OK |
FF/Mozilla中,空白或者換行是文本節點,是childNodes的成員。 可以用node.getElementsByTagName()迴避。 |
25 |
obj. insertAdjacentElement |
向指定的位置插入元素 eg: obj.insertAdjacentElement("beforeBegin",button); |
OK |
NO |
NO |
OK |
insertAdjacentElement函數和insertAdjacentText函數也類似。 可以用insertBefore函數實作類別似功能。 |
26 |
createElement() |
建立指定類型元素。 前提:元素為HTML指令碼 eg:document.createElment("<input type='radio' value='test'>"); |
OK |
NO |
NO |
OK |
可以先建立出對象元素,再進行屬性設定;或者直接以InnerHTML的形式加到對應位置。 |
27 |
nodeName |
取對象(tag,attribute,textnode)節點名稱 eg: name = obj.nodeName; |
OK |
OK |
OK |
OK |
有人說存在差異,不知道是具體的前提條件,先記錄備考。 替代方案: 如果節點是tag元素可以用"tagName"取值;如果節點是attribut對象可以用"name"取值;如果節點是textnode元素可以用nodeType==3判斷。 |
28 |
window.event |
取得當前的事件對象 eg: window.event; |
OK |
NO |
NO |
? |
可以主動向事件的響應函數傳入event參數。 eg:<a onclick="javascript:showHelp(event)">help</a> |
29 |
event.target |
取得事件的觸發對象 eg: e.target; |
NO |
OK |
OK |
? |
可以和srcElement共同使用;可以主動向事件的響應函數傳入觸發對象元素。 eg:<a onclick="javascript:showHelp(this, event)">help</a> |
30 |
event.srcElement |
取得事件的觸發對象 eg: e.srcElement; |
OK |
NO |
NO |
? |
可以和target共同使用;可以主動向事件的響應函數傳入觸發對象。 eg: var obj = (e.target) ? e.target : e.srcElemtn; |
31 |
event對象屬性 |
當前三個瀏覽器的共同擁有的屬性: altKey button cancelBubble clientX clientY ctrlKey screenX screenY shiftKey type |
altLeft behaviorCookie behaviorPart bookmarks boundElements contentOverflow ctrlLeft dataFld dataTransfer fromElement keyCode nextPage offsetX offsetY propertyName qualifier reason recordset repeat returnValue srcElement shiftLeft srcFilter srcUrn toElement wheelDelta x y |
bubbles cancelable currentTarget detail eventPhase explicitOriginalTarget isChar isTrusted layerX layerY metaKey originalTarget pageX pageY rangeOffset rangeParent relatedTarget target timeStamp view which |
bubbles cancelable charCode currentTarget detail eventPhase explicitOriginalTarget isChar keyCode layerX layerY metaKey originalTarget pageX pageY popupWindowURI rangeOffset rangeParent relatedTarget requestingWindowURI target timeStamp view which |
? |
event對象的不同點太多,在使用的時候需要一一檢查才行。具體可以用頁面下方的測試地區實驗。 |
32 |
註冊event |
用attachEvent函數註冊 |
OK |
NO |
NO |
- |
小心記憶體流失!!! 事件處理完後一定要調用detachEvent函數銷毀事件,而且要注意避免重複註冊。 |
33 |
註冊event |
addEventListener函數註冊 |
NO |
OK |
OK |
- |
|
34 |
註冊event |
obj.onxxx = Function("響應函數名稱或代碼");方式註冊 eg: btn.onclick = Function(doclick); btn.onclick = Function("return 1+1;"); |
OK |
OK |
OK |
- |
|
35 |
銷毀event |
detachEvent函數銷毀 |
OK |
NO |
NO |
- |
|
36 |
銷毀event |
removeEventListener函數銷毀 |
NO |
OK |
OK |
- |
|
37 |
銷毀event |
obj.onxxx = null;方式註冊 eg: btn.onclick = null; |
OK |
OK |
OK |
- |
|
38 |
觸發event |
fireEvent函數 eg:btn.fireEvent("onclick"); FF: var e = document.createEvent("Events"); e.initEvent("click", true, false); element.dispatchEvent(event) |
OK |
NO |
NO |
- |
|
39 |
觸發event |
dispatchEvent函數 eg: var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true); btn.dispatchEvent(evt); |
NO |
OK |
OK |
- |
|