Week 07: Lecture – DOM

This Week’s Assignment

Create a Gallery

DOM

The DOM is the Document Object Model. This is how the browser keeps track of all of the information relating to the document itself, which resides inside of the window.

Web content exists in 3 layers

  • Structure (HTML)
  • Presentation (CSS)
  • Behavior (JS)

DOM as a Family tree

1
2
3
4
5
6
7
8
9

<html>
  <head>
    <title>Sample Document</title>
  </head>
  <body>
    <h1>An HTML Document</h1>
    <p>This is a <i>simple</i> document.</p>
  </body>
</html>
DOM Tree

Node Information

nodeName

	// fetch the element with the ID of 'test'
	var elem = document.getElementById('test');
	// get the object name. HEAD for <head>
	var elemName = elem.nodeName;

nodeValue

	var elem = document.getElementById('test'); 
	// If not an element node, the value of the object
	// returns the text in a text node or the VALUE of an attribute
	var elemValue = elem.nodeValue;

nodeType

	var elem = document.getElementById('test'); 
	// Numeric type of node (see table below)
	var elemType = elem.nodeType;
Types of nodes
Interface nodeType constant nodeType value Use
Attr Node.ATTRIBUTE_NODE 2 HTML
Text Node.TEXT_NODE 3 HTML
Comment Node.COMMENT_NODE 8 HTML
Document Node.DOCUMENT_NODE 9 HTML

Getting Elements

document.getElementById()

	// finds the element with the id="test" 
	//and returns a reference to that element
	document.getElementById('test');

document.getElementsByTagName();

	// find all of the links in the document and return a nodeList
	// of all the elements with the particular tag
	var allLinks = document.getElementsByTagName("a"); 
	for(var i = 0; i < allLinks.length; i++) {	
		// Do something with each of member of the nodeList
		allLinks[i].onclick=function() {
			alert("you have clicked a link");
		}	
	}

Get all tags in a document using “*”

       	// finds ALL elements in the document and returns a nodeList.
	var allLinks = document.getElementsByTagName('*');

Combining the document.getElementsByTagName() and document.getElementById()

  // find ALL links within the element that has id="main_nav"
  var allLinks = document.getElementById('main_nav').getElementsByTagName('a');

childNodes

	var elem = document.getElementById('test'); 
	// find ALL CHILDREN elements of elem and returns a nodeList.
	// Usually have to use a loop to make it useful
	var elemChildren = elem.childNodes;

firstChild

	var elem = document.getElementById('test'); 
	// find FIRST child element inside elem 
	// and returns a reference to the object
	var elemFirstChild = elem.firstChild;

lastChild

	var elem = document.getElementById('test'); 
	// find LAST child element inside elem and return a reference to the object
	var elemLastChild = elem.lastChild;

parentNode

	var elem = document.getElementById('test'); 
	// find the PARENT element of the elem also known as an ancestor
	var elemParent = elem.parentNode;

previousSibling

	var elem = document.getElementById('test'); 
	// find the nearest sibling to elem that 
	// occurs before elem in the source code
	var elemPrevSib = elem.previousSibling;

nextSibling

	var elem = document.getElementById('test'); 
	// finds the nearest sibling to elem 
	// that occurs after elem in the source code
	var elemNextSib = elem.nextSibling;

Changing the Document tree

document.createElement()

	// creates a new DIV element and returns a reference to that div
	document.createElement("div");

document.createTextNode()

	// creates a new text node and returns a reference to that node
	document.createTextNode("here is some new text");

appendChild()

	var elem = document.getElementById('test');
	var child = document.createElement('div');
	// appends the object child to elem child 
	// becomes the lastChild of id="test" 
	elem.appendChild(child);

insertBefore()

	var elem = document.getElementById('test');
	var insertionPoint = document.getElementById('test2');
	var child = document.createElement('div');
	// insert the object child into elem before insertionPoint 
	// child becomes insertionPoint's previous sibling 
	elem.insertBefore(child, insertionPoint);

removeChild()

	var elem = document.getElementById('test');
	var child = document.createElement('div');
	// remove object child from elem 
	elem.removeChild(child);

cloneNode()

	var elem = document.getElementById('test');
	// clone the elem object and return a reference. 
	// true says to clone all children of the object 
	// as part of the object 
	elem.cloneNode(true);

replaceChild()

	var elem = document.getElementById('test');
	var toReplace = document.getElementById('test2');
	var child = document.createElement('div');
	// replace toReplace with the child object 
	elem.replaceChild(child, toReplace);

Attributes

setAttribute

	var elem = document.getElementById('test');
	// set the attribute class="js_enabled" on elem
	elem.setAttribute("class", "js_enabled");

getAttribute

	var elem = document.getElementById('test');
	// get the value of the attribute class for elem
	elem.getAttribute("class");

Reading

* Douglas Crockford Videos: Theory of the DOM: 1
* Douglas Crockford Videos: Theory of the DOM: 2
* Douglas Crockford Videos: Theory of the DOM: 3
* W3C DOM – Introduction – quirksmode
* PPK on Javascript Chapter 8 (if you have that book)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks