10 Essential DOM Method Usage

HTML for Example

One
Two
Three
One
Two
Three
							<ul id="list">
								<li><a href="link1.html" class="link_one">Link Number One</a></li>
								<li><a href="link2.html">Link Number Two</a></li>
								<li><a href="link3.html">Link Number Three</a></li>
								<li><a href="link4.html">Link Number Four</a></li>
								<li><a href="link5.html" id="link_5" rel="external">Link Number Five</a></li>
							</ul>

							<form id="my_form1" method="post" action="form.html">
								<input type="checkbox" value="one" name="options" id="option1" checked="checked" /> One<br />
								<input type="checkbox" value="two" name="options" id="option2" /> Two<br />
								<input type="checkbox" value="three" name="options" id="option3" /> Three<br />
							</form>

							<form id="my_form2" method="post" action="form.html">
								<input type="radio" value="one" name="options" /> One<br />
								<input type="radio" value="two" name="options" checked="checked" /> Two<br />
								<input type="radio" value="three" name="options" /> Three<br />
							</form>

							<div id="content"></div>
						


1. getElementById()

							// getElementById()
							var myVariable = document.getElementById("my_element");
							myVariable.style.display = 'block';
							myVariable.style.backgroundColor = '#f00';
							myVariable.style.border = '1px solid #00f';
						

2. getElementsByTagName()

							// getElementsByTagName()
							var myLinkCollection = document.getElementsByTagName("a");
							
							for (var i=0; i<myLinkCollection.length; i++) {
								if (myLinkCollection[i].className == 'link_class') {
									myLinkCollection[i].onclick = function () {
										this.style.backgroundColor = '#f00';
									}
								}
							}

							var myLinkCollection = document.getElementsByTagName("a");

							for (var i=0; i<myLinkCollection.length; i++) {
								var myLink = myLinkCollection[i];
								if (myLink.className == 'link_class') {
									myLink.onclick = function () {
										this.style.backgroundColor = '#f00';
									}
								}
							}
						

3. node.childNodes, node.firstChild, node.lastChild, node.parentNode, node.nextSibling, node.previousSibling

							 //if firstChild is whitespace
							var myLinkList = document.getElementById("list")
							var a = myLinkList.firstChild;
							while (a.nodeName == "#text") { 
							  a = a.nextSibling;
							}
							var myFirstLink = a.firstChild;
							while (myFirstLink.nodeName =="#text") {
								myFirstLink = myFirstLink.nextSibling;
							}
							alert(myFirstLink.className);

							var myLinkList = document.getElementById("list");
							var myFirstLink = myLinkList.childNodes[0].childNodes[0];
							alert(myFirstLink.className);

							var myLinkList = document.getElementById("list");
							var myFirstLink = myLinkList.firstChild.firstChild;
							alert(myFirstLink.className);

							var myLinkList = document.getElementById("list");
							var myFirstLink = myLinkList.firstChild.firstChild.nextSibling.previousSibling;
							alert(myFirstLink.className);
						

4. createElement()

							//createElement()
							var myNewListItem = document.createElement("li");
							var myNewLink = document.createElement("a");
						

6. appendChild()

						//appendChild()
						var myNewListItem = document.createElement("li");
						var myNewLink = document.createElement("a");

						var myLinkList = document.getElementById("list");
						myLinkList.appendChild(myNewListItem);
						myLinkList.lastChild.appendChild(myNewLink);
						

6. removeChild()

							//removeChild()
							var myLinkList = document.getElementById("list");
							var myRemoveLink = myLinkList.lastChild;
							myLinkList.removeChild(myRemoveLink);
						

7. getAttribute()

							//getAttribute()
							var myLinkFive = document.getElementById("link_5");
							var myLinkAttribute = myLinkFive.getAttribute('rel');
						

8. setAttribute()

							//setAttribute()
							var myLinkFive = document.getElementById("link_5");
							myLinkFive.setAttribute("rel", "nofollow");
						

9. document.forms

							//document.forms
							var myCheckBoxOne = document.forms['my_form1']['option1'];
							alert(myCheckBoxOne.checked);

							var radioButtonGroup = document.forms['my_form2']['options'];
							for (var i=0; i<radioButtonGroup.length; i++) {
								if (radioButtonGroup[i].checked == true) {
									alert('Your selection is '+radioButtonGroup[i].value);
								}
							}
						

10. innerHTML

							//innerHTML
							var myContentHolder = document.getElementById("content");
							myContentHolder.innerHTML = "<p>This is the dynamic content created by the innerHTML property</p>";
						

11. nodeValue, createTextNode

							// nodeValue, createTextNode
							var myLinkFive = document.getElementById("link_5");
							var text = myLinkFive.firstChild.nodeValue;
							alert(text);
							var textNode = document.createTextNode(" "+text);
							myLinkFive.appendChild(textNode);