1) EventType: A string representing the event to bind, 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 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

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>

Example(s):

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

Example(s):

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

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"

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>

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>

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>