JavaScript – The DOM
description
Transcript of JavaScript – The DOM
![Page 1: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/1.jpg)
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
![Page 2: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/3.jpg)
Example HTML Code
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head> <title>DOMinating JavaScript</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
<body> <h1> DOMinating JavaScript </h1>
<p> If you need some help with your JavaScript, you might like to read articles from <a href="http://www.danwebb.net/" rel="external">Dan Webb</a>, <a href="http://www.quirksmode.org/" rel="external">PPK</a> and <a href="http://adactio.com/" rel="external">Jeremy Keith</a>. </p>
</body></html>
![Page 4: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/4.jpg)
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
![Page 5: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/5.jpg)
Example Page Elements - Mapped
5
![Page 6: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/7.jpg)
The Document Node
7
The document node is a special node that is always at the top of the tree.
![Page 8: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/8.jpg)
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')
![Page 9: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/9.jpg)
Text Nodes
9
Each text node has its own value and is attached to an element node
![Page 10: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/11.jpg)
Attribute Nodes
11
Attribute nodes point to the attributes of the element
Here we see an "Anchor" element node with a text nodeand two attribute nodes, "href" and "rel"
![Page 12: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/12.jpg)
Accessing Nodes
• Finding an element by a specific ID<p id="uniqueElement">Hi There</p>
• Use getElementById() methodvar myPara1
= document.getElementById("uniqueElement");
12
![Page 13: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/13.jpg)
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);
<p id="para1">Hi There</p>
13
![Page 14: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/14.jpg)
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
![Page 15: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/15.jpg)
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 firstvar target = document.getElementById("notthere");if (target != null){
alert(target.nodeName);}
15
![Page 16: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/16.jpg)
Exercise 3.2
• Add the check for null to your last program from Exercise 3.1
16
![Page 17: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/17.jpg)
Finding Elements by Tag Name
• You can retrieve a list of elements• Use getElementsByTagName()
var myParaList =document.getElementsByTagName("p");
alert(myParaList.length);
<p>Hi There</p><p>How are you?</p>
myParaList is a node list
17
![Page 18: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/18.jpg)
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
![Page 19: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/19.jpg)
Finding Elementsin Other Elements
• You don't have to use "document"var myListitems =
document.getElementsByTagName("li");var my2ndListItems =
myListitems.getElementsByTagName("li");
19
![Page 20: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/20.jpg)
Exercise 3.3• Using the following HTML, write JavaScript code to
display the number paragraphs in the 2nd div…
<div><p>Hi There</p><p>How are you?</p>
</div><div>
<p>I'm fine</p><p>Thanks for asking</p> <p>How are you?</p>
</div>
20
![Page 21: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/21.jpg)
Navigating the DOM Tree
• Finding a Parent• Finding Children• Finding Siblings• Getting Attributes• Setting Attributes
21
![Page 22: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/22.jpg)
Finding a Parent
• Finding a parent node<p>
<a id="oliver" href="someURL">Oliver Twist</a></p>
var myOliver = document.getElementById("oliver");var myPara = myOliver.parentNode;
22
![Page 23: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/23.jpg)
Finding Children and Siblings
• Finding children nodes<ul id="baldwins">
<li>Alec</li><li>Daniel</li><li>William</li><li>Stephen</li>
</ul>
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
![Page 24: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/24.jpg)
Visual Relationships
24
![Page 25: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/25.jpg)
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
![Page 26: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/26.jpg)
Getting an Attribute
• Use the getAttribute() function• Example….
<a id="koko" href="http://koko.org">Koko</a>
var koko = document.getElementById("koko");var kokoHref = koko.getAttribute("href");
The variable kokoHref will now be "http://koko.org"
26
![Page 27: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/28.jpg)
"Old" Ways May be Best
• In most cases you can just append the attribute name with the dot operator…
<a id="koko" href="http://koko.org">Koko</a>
var koko = document.getElementById("koko");var kokoHref = koko.href;
28
![Page 29: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/29.jpg)
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
![Page 30: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/30.jpg)
setAttribute Example<a id="koko" href="http://koko.org">Koko</a>
var koko = document.getElementById("koko");koko.setAttribute("title", "Web site for Koko!");
Now the HTML is …
<a id="koko" title="Web site for Koko!" href="http://koko.org">Koko</a>
30
![Page 31: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/31.jpg)
Styles• Styles are the standard way to change to look
of an HTML page.• Using <style> section in the head area example …
makes the text in all paragraphs be blue<style>
p {color: blue;}</style>
• Inline style example making text blue on this line only<span style="color: blue;">Hi there</span>
31
![Page 32: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/32.jpg)
Changing Styles with JavaScript
• You can change the style property of any tag using dot notation
• Examplesvar myPara = document.getElementById("para");myPara.style.color = "blue";
var myDiv = document.getElementById("div1");myDiv.style.backgroundColor = "#000066";
32
![Page 33: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/33.jpg)
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
![Page 34: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/34.jpg)
Style Changes Happen Immediately!!
34
Becomes
Using the following code…
var body = document.getElementsByTagName("body")[0]; body.style.backgroundColor = "#000000"; body.style.color = "#FFFFFF";
![Page 35: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/35.jpg)
Exercise 3.4• Using the following HTML, change the background
color of the 1st Div to Yellow and the text color of the 2nd Div to be blue. Use DOM methods and styles
<div id="intro"><p>Hi There</p><p>How are you?</p>
</div><div>
<p>I'm fine</p><p>Thanks for asking</p> <p>How are you?</p>
</div>
35
![Page 36: JavaScript – The DOM](https://reader036.fdocuments.in/reader036/viewer/2022081502/56816460550346895dd63a2a/html5/thumbnails/36.jpg)
End
• End of Lesson
36