DHTML DOM常用JS函數整理

1.測試是否是IE

var isIE = document.all && window.external; （據說是比較安全的做法）

2.event 對像 (這個比較簡單，隻列出常用的屬性)。

　event 對像儲存的是上一次事件發生的狀态，常用的屬性有

　　　clientX、clientY　　　事件發生時滑鼠指針的坐标。(傳回值為數值)

　　　button 哪個滑鼠按鍵被點選(IE：1|4|2   左|中|右，非IE：0|1|2  左|中|右)　

　　　altKey、ctrlKey、shiftKey       哪個鍵被按下了

　　　srcElement、target　　觸發事件的節點（元素)，前者為IE，後者為非IE。

　　　toElement、fromElement　移入滑鼠的元素、移出滑鼠的元素(mouseover 和 mouseout 事件，隻IE适用)

　　　relatedTarget 　 對于 mouseover 事件來說，該屬性是滑鼠指針移到目标節點 上時所離開的那個節點。對于 mouseout 事件來說，該屬性是離開目标時，滑鼠指針進入的節點。(非IE适用)

　　　x,y　　　　　　　事件發生的位置的 x 坐标和 y 坐标，它們相對于用CSS動态定位的最内層包容元素

　　　type　　　　　　事件類型(mousemove,mouseover等)

3.擷取節點

　　oElement = document . getElementById ( sID )

　　oElements = document . getElementsByName ( sName )

　　arrElements = object . getElementsByTagName ( sTagName )

　　oElements = object . tags ( sTagName ) sTagname 為标記名,如 "table"、"div"

　　oElement = document . elementFromPoint ( iX , iY ) 　　 iX 、iY 提供的坐标是客戶區坐标，客戶區的左上角為 (0,0)。

　　IE下還可以用 document.all.id　或 document.all("id")方法擷取節點

　　　

4.節點(element)操作

　　4.1　建立節點　oElement=document.createElement(節點類型)

　　4.2　添加節點(把節點加入到DOM鍊)

　　　　　1.　oElement = 父節點.appendChild (新建立的節點)

　　　　　2.　父節點.applyElement(新建立的節點,sWhere)     其中sWhere取值為 outside|inside  outside:預設值。将 oElement 添加為 object 的父對象。inside:将 oElement 添加為 object 的子對象。但 oElement 将成為 object 的原所有子對象的父對象。

　　　　　3.　oElement = object . insertAdjacentElement ( sWhere , oElement ) 　　

      插入鄰近節點，sWhere　取值beforeBegin:将 oElement 插到 object 的開始标簽之前。afterBegin:将oElement 插到 object 的開始标簽之後。但是在 object 的所有原有内容之前。 beforeEnd   : 将oElement 插到 object 的結束标簽之前。但是在 object 的所有原有内容之後。 afterEnd:将oElement 插到 object 的結束标簽之後。

　　　　　4.　oElement = object . insertBefore ( oNewNode , oChildNode ) 　　

插入到某個子節點（oChildNod)前面,oChildNode可為空，此時插入到最後一個子節點後面黃

　　4.3　删除節點　

　　　　　1.　節點數組.remove(節點索引)   從節點數組中删除對應節點索引的對象。

　　　　　2.　object.removeNode(bRemoveChildren)　　删除object節點，bRemoveChildren是否删除子節點

　　　　　3.　object.removeChild(子節點)　删除子節點

　　4.4　替換節點

　　　　　1.　oElement = object . replaceNode ( oNewNode )

　　　　　2.　oElement = object . replaceChild ( oNewNode , oChild )

　　4.5　交換節點

　　　　　object . swapNode ( oNode ) 　　object 與 oNode 交換

　　4.6　複制節點

　　　　　oElement = object . cloneNode ( bCloneChildren )   bCloneChildren 是否包括子節點

　　4.7　是否包含節點　

　　　　　bFound = object . contains ( oElement ) 　　傳回是否object包含oElement

　　4.8　是否有子節點

　　　　　bChildNodes = object . hasChildNodes()

　　4.9　Select下的Options操作

　　　　　添加　　oSelect.options.add (option,iIndex)

5.節點屬性操作

　　object . setAttribute ( sName , vValue , iFlags ) 　sName,屬性名;iFlags,0|1,是否區分大小寫

　　vAttrValue = object . getAttribute ( sAttrName , iFlags )   iFlags,0|1,是否區分大小寫

　　bSuccess = object . removeAttribute ( sName,iCaseSensitive )   iCaseSensitive,0|1,是否區分大小寫

　　object . clearAttributes ()   清除所有持久性屬性

　　object . mergeAttributes ( oSource , bPreserve )   從oSource複制所有可讀寫屬性到object,若bPreserve為true不複制id,name

6.視窗操作

　　popup . show ( iX , iY , iWidth , iHeight , oElement )

　　oPopup = window . createPopup ( vArgs )

　　popup . hide ()

　　bConfirmed = window . confirm ( sMessage )

　　oNewWindow = window . open ( sURL , sName , sFeatures , bReplace )

　　vReturnValue = window . showModalDialog ( sURL , vArguments , sFeatures )

　　vReturnValue = window . showModelessDialog ( sURL , vArguments , sFeatures )

　　window . resizeBy ( iX , iY )

　　window . resizeTo ( iWidth , iHeight )　　

7.其它常用

　　location . assign ( sURL ) 加載一個新的HTML文檔到目前視窗。(同location="sURL")

　　object . blur () 失去焦點

　　object . focus ()　焦點

　　object . click () 模拟點選

　　window . close () 關閉視窗

　　bSuccess = object . execCommand ( sCommand , bUserInterface , vValue ) 執行指令，常用的指令有copy、paste、Delete、Cut、Unselect、SelectAll、SaveAs、print