This is a draft cheat sheet. It is a work in progress and is not finished yet.
DOM Selector
getElementById()
querySelector()
getElementsByClassName()
getElementsByTagName()
querySelectorAll()
parentNode
previsouSibling
nextSibling
firstChild
lastChild
|
DOM Node Types
Document
Element
Text
Attribute
Whitespace
|
in browsers other than IE, whitespace is treated as text node
DOM Element Node
innerHTML
textContent
createElement()
createTextNode()
appendChild()
removeChild()
|
create functions will not put the node into DOM tree. Need to use appendChild() to add the newly created element in DOM.
DOM Attribute Node
className
id
hasAttribute()
getAttribute()
setAttribute()
removeAttribute()
|
These are called on element node
Document Object
|
encodeURIComponent(str)
|
IE5~8
event.target |
event.srcElement |
func(e) |
window.event |
addEventListener() |
attachEvent() |
event.preventDefault() |
event.returnValue=false |
event.stopPropagation() |
event.cancelBubble=false |
|
|
Focus Event
|
element gains focus |
|
element lose focus |
Form Event
|
|
select, check box, radio button |
|
|
|
|
|
|
Mutation Event
|
|
|
DOMNodeInsertedIntoDocument
|
DOMNodeRemovedFromDocument
|
|
|
Event Binding
Event handler attribute:
<... onclick="func()"> // bad practice
Event handler
el.onclick=func()
Event listener
el.addEventListener('click', func, [boolean])
el,addEventListener('click', function() { myFunc(0) }, [boolean])
Support for older IE (5-8)
if(el.addEventListener) {
el.addEventListener()
} else {
el.attachEvent('click', myFunc())}
|
|
