JavaScript – The DOM JavaScript is object based The browser is object based – We can access the browser's objects in the same way we did JavaScript's Two Object-Models – DOM (Document Object Model) – BOM (Browser Object Model) 1
The DOM When Web page is loaded into the browser – Every element on the page gets a "reference" – JavaScript code can use these references to change elements on a page 2
Example HTML Code 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " DOMinating JavaScript DOMinating JavaScript If you need some help with your JavaScript, you might like to read articles from Dan Webb, PPK and Jeremy Keith.
Elements Become Objects Each Element on Web page becomes an objects – Has properties – Has methods Property values can often be changed – Causes Web page to change in-place 4
Example Page Elements - Mapped 5
Nodes 6 Each Object is represented by a Node These are Element Objects Every Element is identified by its tag name (e.g h1, p) There is a parent-child relationship between the nodes
The Document Node 7 The document node is a special node that is always at the top of the tree.
Types of Nodes 8 Element nodes point to the element itself, not its content! Two other kinds of nodes for content A text node is anything contained between the angle brackets An attribute node is used to access attributes of a tag (e.g. 'href')
Text Nodes 9 Each text node has its own value and is attached to an element node
Whitespace and Text Nodes Whitespace may produce text nodes Different browsers handle whitespace differently… so be careful – Never rely upon the number or order of nodes when accessing the DOM 10
Attribute Nodes 11 Attribute nodes point to the attributes of the element Here we see an "Anchor" element node with a text node and two attribute nodes, "href" and "rel"
Accessing Nodes Finding an element by a specific ID Hi There Use getElementById() method var myPara1 = document.getElementById("uniqueElement"); 12
A Node's Name Once you have reference to an element, you have access to it's properties Example: nodeName var target = document.getElementById("para1"); alert(target.nodeName); Hi There 13
Exercise 3.1 Create a small HTML file with a paragraph in the body Get a reference to the paragraph object – Use an alert() to display its nodeName – Use an alert() to display the object by itself 14
Check for Unknown Objects If your JavaScript tries to perform an operation or refer to a property of an object that does not exist, your program will stop running Check for null first var target = document.getElementById("notthere"); if (target != null) { alert(target.nodeName); } 15
Exercise 3.2 Add the check for null to your last program from Exercise
Finding Elements by Tag Name You can retrieve a list of elements Use getElementsByTagName() var myParaList = document.getElementsByTagName("p"); alert(myParaList.length); Hi There How are you? myParaList is a node list 17
Node List A node list can be treated much like an Array Use a for-loop to process each item in list var myParaList = document.getElementsByTagName("p"); for (var i=0; i<myParaList.length; i++) { alert(myParaList[i].nodeName); } 18
Finding Elements in Other Elements You don't have to use "document" var myListitems = document.getElementsByTagName("li"); var my2ndListItems = myListitems.getElementsByTagName("li"); 19
Exercise 3.3 Using the following HTML, write JavaScript code to display the number paragraphs in the 2 nd div… Hi There How are you? I'm fine Thanks for asking How are you? 20
Navigating the DOM Tree Finding a Parent Finding Children Finding Siblings Getting Attributes Setting Attributes 21
Finding a Parent Finding a parent node Oliver Twist var myOliver = document.getElementById("oliver"); var myPara = myOliver.parentNode; 22
Finding Children and Siblings Finding children nodes Alec Daniel William Stephen var baldwins = document.getElementById("baldwins"); var alec = baldwins.firstChild; var stephen = baldwins.lastChild; var william = baldwins.childNodes[2]; var stephen = william.nextSibling; var daniel = william.previousSibling; 23
Visual Relationships 24
Interacting with Attributes Attributes are always associated with a particular Element tag There are no DOM functions that a particular attribute node (apart from it's Element) or look across the page for similar attribute values. 25
Getting an Attribute Use the getAttribute() function Example…. Koko var koko = document.getElementById("koko"); var kokoHref = koko.getAttribute("href"); The variable kokoHref will now be " 26
Browser Differences Firefox returns Null for unset attributes IE returns and empty String for unset attributes, but a Null for non-string attributes like onclick IE may alter href values to absolute URLs :-P 27
"Old" Ways May be Best In most cases you can just append the attribute name with the dot operator… Koko var koko = document.getElementById("koko"); var kokoHref = koko.href; 28
Setting an Attribute's Value All HTML attributes are writable as well as readable You can make dynamic changes happen to your Web page Use the setAttribute() function – Pass the attribute name and its value 29
setAttribute Example Koko var koko = document.getElementById("koko"); koko.setAttribute("title", "Web site for Koko!"); Now the HTML is … Koko 30
Styles Styles are the standard way to change to look of an HTML page. Using section in the head area example … makes the text in all paragraphs be blue p {color: blue;} Inline style example making text blue on this line only Hi there 31
Changing Styles with JavaScript You can change the style property of any tag using dot notation Examples var myPara = document.getElementById("para"); myPara.style.color = "blue"; var myDiv = document.getElementById("div1"); myDiv.style.backgroundColor = "#000066"; 32
Rules for Converting Styles There are many, many style properties Here are a few rules for converting style code to JavaScript code that changes styles – Most CSS properties are just appended to the style for the element (e.g. myPara.style.color) – Any style that has a hyphen in it convert like so… text-indent becomes textIndent E.g. myPara.style.textIndent = "10px"; 33
Style Changes Happen Immediately!! 34 Becomes Using the following code… var body = document.getElementsByTagName("body")[0]; body.style.backgroundColor = "#000000"; body.style.color = "#FFFFFF";
Exercise 3.4 Using the following HTML, change the background color of the 1 st Div to Yellow and the text color of the 2 nd Div to be blue. Use DOM methods and styles Hi There How are you? I'm fine Thanks for asking How are you? 35
End End of Lesson 36