Not supported in IE, which uses attachEvent() instead.

1) EventType: A string representing the event to bind, without the "on" prefix. For example, "click", "mousedown" etc.
2) listener: The object or function to fire when the event fires. The actual parameter entered should be a reference to the function or object (ie: "dothis" instead of "dothis()".
3) useCapture: Boolean indicating whether to bind the event as it is propogating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.

The advantage of using the DOM to bind an event is that you can assign multiple functions to a node for the same event (ie: window.onload) without running into event handler conflicts.

Example(s):

function statusreport(){
 alert("document has loaded")
}

if (window.addEventListener)
 window.addEventListener("load", statusreport, false) //invoke function
window.onload=statusreport() //function invoked again, since no event handler conflicts

Since listener must be a function reference, a common question is how to specify the listener so it can receive parameters of its own. The solution is just to wrap the listener in an anonymous function reference:

function dothis(what){
 alert("Mom says to do " + what)
}

if (window.addEventListener)
 window.addEventListener("load", function(){dothis('Your homework')}, false) //invoke function

For events such as "click" or "mousemove" that populate the Event object with additional info such as where the mouse is at the time, addEventListner() passes this object silently to the listener. To receive it, define a single parameter in the anonymous function:

function getcoord(evt){
 alert("You clicked at coordinates [" + evt.clientX + "," + evt.clientY + "]")
}

if (document.addEventListener)
 document.addEventListener("click", function(evt){getcoord(evt)}, false) //invoke function

IE 5+only function

Example(s):

if (window.attachEvent)
window.attachEvent("onload", statusreport) //invoke function

Example(s):

<div id="test"></div>

<script type="text/javascript">
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext) //append text to new div
document.getElementById("test").appendChild(newdiv) //append new div to another div

</script>

An interesting feature of appendChild() is that it can be used to directly move an existing element on the page so it becomes the child of a different parent. There's no need to remove the element from the previous parent first, as the method always checks to see first if the element beind appended currently already has a parent, and remove it from that parent first if found to be true. The below example moves a H1 element from its current location to the very end of the document:

<h1 id="myheader">Welcome to JavaScript Kit</h1>
<p>Hope you enjoy the site!</p>

<script type="text/javascript">
document.body.appendChild(document.getElementById("myheader")) //moves "myheader" to end of the page

</script>

Example(s):

p=document.getElementById("mypara")
pclone = p.cloneNode(true)

IE 5+only function

Example(s):

if (window.detachEvent)
window.detachEvent("onload", statusreport) //invoke function

Not supported in IE, which uses fireEvent() instead.

Example(s):

<div id="test" onclick="alert('hi')">Sample DIV.</div>

<script type="text/javascript">
//Generate an artificial click event on "test". Fires alert("hi")
var clickevent=document.createEvent("MouseEvents")
clickevent.initEvent("click", true, true)
document.getElementById("test").dispatchEvent(myevent)

</script>

Example(s):

document.getElementById("test").getAttribute("align")

Example(s):

var attributeobj=document.getElementById("nav").getAttributeNode("align")
attributeobj.value="center"

Note: Supported in FF3+, Opera 9.5+, Safari 3+, though not IE8.

//get elements within element "house" that has a CSS class of "cats"
document.getElementById("house").getElementsByClassName("cats")

You can get elements with different CSS class names within an element all in one scoop, by separating each class with a space:

//get elements within element "house" that has a CSS class of "cats" or "dogs"
document.getElementById("house").getElementsByClassName("cats dogs")

Note that getElementsByClassName() also exists on the document element to get every matching element within the document.

Example(s):

var mylist=document.getElementById("navlist")
var listitems= mylist.getElementsByTagName("li")
for (i=0; i<listitems.length; i++)
//manipulate each li element

var alltags=document.getElementsByTagName("*") //returns all elements on page

Example(s):

if (document.getElementById("mytable").hasAttribute("style"))
//manipuate the element's style

Example(s):

<div id="employees">
<div id="george">George Doe: Human resources department</div>
</div>

To insert a new DIV directly above "george", so the outcome becomes:

<div id="employees">
<div id='kevin">Kevin Lin: Main system administrator</div>
<div id="george">George Doe: Human resources department</div>
</div>

You would do the following:

<script type="text/javascript">

var newemployee=document.createElement("div")
var oldemployee=document.getElementById("george")
newemployee.setAttribute("id", "kevin")
newemployee.innerHTML="Kevin Lin: Main system administrator"
document.getElementById("employees").insertBefore(newemployee, oldemployee)

</script>

Important: Like many DOM methods that change the structure of the document, insertBefore() can only be called after the page has fully loaded. Doing so before will return strange errors in most browsers!
 

<div id="employees">
<div id="george">George Doe: Human resources department</div>
</div>

To insert a new DIV directly below "george", so the outcome becomes:

<div id="employees">
<div id="george">George Doe: Human resources department</div>
<div id='kevin">Kevin Lin: Main system administrator</div>
</div>

You would do the following:

<script type="text/javascript">

var newemployee=document.createElement("div")
var oldemployee=document.getElementById("george")
newemployee.setAttribute("id", "kevin")
newemployee.innerHTML="Kevin Lin: Main system administrator"
document.getElementById("employees").insertBefore(newemployee, oldemployee.nextSibling)

</script>

Example(s):

<div id="div1"></div>
<div id="div2"></div>

<script type="text/javascript">
var mydivs=document.getElementsByTagName("div")
alert(mydivs.item(1).id) //alerts "div2"
</script>

Note: Currently supported in FF3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

Example:

<ul id="mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script type="text/javascript">
var item2=document.getElementById("mylist").querySelector('li:nth-of-type(2)')
alert(item2.innerHTML) //alerts "Item 2"
</script>

You can enter multiple CSS selectors each separated by a comma (,), in which case the first matching element of any of the CSS selectors entered will be returned:

//returns either element "#leftcolumn" or "#rightcolumn", depending on which one is found first:
myelement.querySelector("#leftcolumn, #rightcolumn")

querySelector() supports an optional 2nd "NSResolver" parameter to resolve namespace prefixes in XHTML documents. Not supported in IE8.

Note: Currently supported in FF3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

Example:

<ul id="mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script type="text/javascript">
var odditems=document.getElementById("mylist").querySelectorAll('li:nth-of-type(odd)')
for (var i=0; i<odditems.length; i++)
 alert(odditems[i].innerHTML) //alerts "Item 1", "Item 3" etc.
</script>

You can enter multiple CSS selectors each separated by a comma (,), in which case all matching elements found using the entered CSS selectors will be returned:

//returns both elements "#leftcolumn" or "#rightcolumn", or one of them if only one defined:
myelement.querySelectorAll("#leftcolumn, #rightcolumn")

querySelectorAll() supports an optional 2nd "NSResolver" parameter to resolve namespace prefixes in XHTML documents. Not supported in IE8.

See "Overview of CSS3 Structural puesdo-classes" for advanced CSS selectors you can use with the query selector methods.

Example(s):

document.getElementById("test").removeAttribute("href")

Example(s):

var hrefattr=document.getElementById("test").getAttributeNode("href")
document.getElementById("test").removeAttributeNode(hrefattr)

Example(s):

<div id="father"><div id="child">A child</div></div>

<script type="text/javascript">
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
</script>

Not supported in IE, which uses detachEvent() instead.

1) EventType: A string representing the event to unbind, without the "on" prefix. For example, "click", "mousedown" etc.
2) listener: The function or method to associate with the event.
3) useCapture: Boolean indicating whether to unbind the event as it is propagating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.

 NS6/Firefox method.

Example(s):

<div id="adiv"><span id="innerspan"></span></div>

<script type="text/javascript">
var oldel=document.getElementById("innerspan")
var newel=document.createElement("p")
document.getElementById("adiv").replaceChild(newel, oldel)
</script>

• To set the "class" attribute, use "className" instead.
• The "attributename" parameter is case sensitive by default in IE . This means if you attempt to set the "align" attribute and "Align" already exists on the element, both will be present as a result. To turn off case sensitivity, set the IE-only 2nd parameter of setAttribute() to 0 (instead of default, which is 1).

Example(s):

document.getElementById("test").setAttribute("title", "JavaScript Kit")

Example(s):

<div id="brother" style="border:1px solid black; padding: 2px">Brother</div>
<div id="sister">Sister</div>

<script type="text/javascript">
var bro=document.getElementById("brother")
var sis=document.getElementById("sister")
var brostyle=bro.getAttributeNode("style")
var clonebrostyle=brostyle.cloneNode(false) //clone attribute first. Required.
sis.setAttributeNode(clonebrostyle)
</script>