javascript dom
DESCRIPTION
Javascript DOM. Peter Atkinson. Objectives. Understand the nature and structure of the DOM Add and remove content from the page Access and change element attributes – including source and class Insert markup into a page using innerHTML Change style attribute using Javascript. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/1.jpg)
1
Javascript DOM
Peter Atkinson
![Page 2: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/2.jpg)
2
Objectives
• Understand the nature and structure of the DOM
• Add and remove content from the page
• Access and change element attributes – including source and class
• Insert markup into a page using innerHTML
• Change style attribute using Javascript
![Page 3: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/3.jpg)
3
What is the DOM?
• Browser Wars 1997
• W3C standardised DOM 1998
• End of ‘browser sniffing’
• Document Object Model – an API that can be used by any language. A knowledge of the DOM will help with PHP or XML
![Page 4: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/4.jpg)
4
Nodes Organise the Page
<html><head> <title>My page</title></head><body> <p>This is text on my
page</p></body></html>
html
head body
title
text
“my page”
p
text
“This is text on my page”
![Page 5: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/5.jpg)
5
What is a Node?
• Element Node – contains an HTML tag
• Text Node – contains text
• Text Nodes are contained in Element Nodes
![Page 6: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/6.jpg)
6
Adding Some Text To A Page
There are five steps:
1. Create a new Element
2. Create new Text
3. Append the new Text to the new Element
4. Find an existing Element
5. Append the new Element to the existing Element
![Page 7: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/7.jpg)
7
1. Create New Element Node
Let us, say create a new <p> tag (element) so that we can attach some text to it
For convenience, we can put the new object into a variable
var newNode;
newNode = document.createElement(“p”)
![Page 8: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/8.jpg)
8
2. Create a Text Node
Next, create a text node
Again, for convenience, we can put the new text node into a variable
var newText;
newText = document.createTextNode(“Some text.”)
![Page 9: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/9.jpg)
9
3. Attach the New Text Node to the New Element
To put the text into the page, we have to attach the text node to the new HTML element:
newNode.appendChild(newText);
![Page 10: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/10.jpg)
10
4.Find an Existing Element
The new element with our text node attached to it is still floating around in a Javascript world. We need to find an existing element so that we can attach it
For convenience, we shall put this existing element into a variable
var docElement;
docElement = document.getElementById(“thisLocation”);
![Page 11: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/11.jpg)
11
5. Append the New Element to the Existing Element
To insert our text into the page, we now have to append the new element to the existing element
docElement.appendChild(newNode);
![Page 12: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/12.jpg)
12
Putting the 5 Steps TogetherHands On: Try out this code
<head><script language="javascript" type="text/javascript">var myText;myText = "This is new text to be added to the page dynamically.";function addText(location) {
var newNode;var newText;var docElement;newNode = document.createElement("p");newText = document.createTextNode(myText);newNode.appendChild(newText);docElement = document.getElementById(location);docElement.appendChild(newNode);
}</script></head><body><p><a href="#" onclick="addText('thisLocation');">Click to add new text to the page</a></p><p id="thisLocation">New text will appear below here</p><p>Some further text in the page</p></body>
![Page 13: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/13.jpg)
13
Remove a Node
• To remove a node, we use the element method removeChild(name of node to be removed)
• For example:function remText(location) {
var docElement; docElement = document.getElementById(location); docElement.removeChild(docElement.lastChild);
}Hands OnModify your HTML page so that the user can click on some
text to remove the text that was inserted
![Page 14: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/14.jpg)
14
getElementsByTagName()
• getElementById() allows you to work with elements by their individual id but often you will want to work with a group of elements
• getElementsByTagName() allows you to work with groups of elements. This method returns an array
![Page 15: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/15.jpg)
15
Using getElementsByTagName()
• Hands On• Open the file JavascriptDOM1.html• Insert this code at the bottom of the document
body:<script language="javascript" type="text/javascript">theseElements = new Array;theseElements = document.getElementsByTagName("li");alert(theseElements.length);</script>
• Now try substituting the tag name li with the wild card *. Try the code in both IE and Firefox.
• Are you surprised by the number of nodes?
![Page 16: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/16.jpg)
16
Stepping Through an Array of Nodes
• We can step through the array of nodes and check what kind of node it is:for (i = 0; i < theseItems.length; i++) {
alert(typeof theseItems[i]);
}
Hands On
Add this code to JavascriptDOM1.html
Execute the code
![Page 17: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/17.jpg)
17
Where on the Node Tree?
• childNodes– nodeList = node.childNodes
• firstChild– reference = node.firstChild
• lastChild
• nextSibling
• parentNode
• previousSibling
![Page 18: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/18.jpg)
18
Attribute Nodes
• We can get at the attributes of an element through attribute nodes
• Attribute nodes, like text nodes are always contained in element nodes
• We shall look at methods:– getAttribute()– setAttribute()
![Page 19: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/19.jpg)
19
Getting Attribute Nodes• Hands On• Open the file JavascriptDOM2.html• Add this code to alert the attribute of an element:
function dispAttribs() {var messg;attribs = new Array;attribs = document.getElementsByTagName("p");for (i = 0; i < attribs.length; i++) {
messg = attribs[i].getAttribute("className");alert(messg);}
}• Add this to the bottom of the body:
<p onclick="dispAttribs();">Click here to see class attributes</p>• Try this in Firefox• Point to consider: why is this attribute called ‘className’?
![Page 20: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/20.jpg)
20
Setting Attribute Nodes
• Hands On• Open the file JavascriptDOM2.html• Add this code to change the attribute of an element:
function chngAttribs() {var messg;
attribs = new Array;attribs = document.getElementsByTagName("p");for (i = 0; i < attribs.length; i++) {
attribs[i].setAttribute("className","jazz");}
}• Add this to the bottom of the body:
<p onclick="chngAttribs();">Click here to change class attributes</p>
![Page 21: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/21.jpg)
21
User inserts and removes text
• Hands On
• Use file JavascriptDOM3.html
• Place code in this page so that:– When the user mouseovers on an image, the
relevant text appears– When the user mouseouts on an image, the
text disappears
![Page 22: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/22.jpg)
22
Accessing Images
• Hands On• Open JavascriptDOM4.html• Examine the layout of the page• We are going to modify the behaviour of the
page so that instead of the images displaying in a new window, they display on the same page
• Write a function that will alter the source of the placeholder image on the page to another image
• Call this function from the onclick event of each link
![Page 23: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/23.jpg)
23
Suggested Solution
• Hint:
• Get the value of the attribute href from the link
• Find the placeholder node
• Set the src attribute of the placeholder to be the same value as the href attribute of the link
![Page 24: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/24.jpg)
24
Code
function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);
}In each link, we need an onclick event: onclick="showPic(this);return false;"
![Page 25: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/25.jpg)
25
Web Page Architecture
• Graceful Degradation = your site is navigable by users who do not have Javascript
• Progressive Enhancement = page built in layers:
HTML for Markup
CSS for Presentation
Javascript for Functionality
Gra
cefu
l Deg
rada
tion
Pro
gre
ssiv
e E
nha
ncem
ent
The page should be constructed using 3 different files – one for each layer
![Page 26: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/26.jpg)
26
Graceful Degradation
• Does this degrade gracefully?<a href=“#” onclick=“popUp(‘http://www.example.com’); return
false;”)>Link to Example</a>
This does degrade gracefully:<a href=“http://www.example.com”
onclick=“popUp(‘http://www.example.com’); return false;”)>Link to Example</a>
But it is a little clumsy. There is a shortcut:<a href=“http://www.example.com” onclick=“popUp(this.href);
return false;”)>Link to Example</a>
![Page 27: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/27.jpg)
27
Progressive Enhancement
• Graceful Degradation follows from Progressive Enhancement
• We need to separate the Javascript from the markup by removing the event handlers from the HTML completely
• We can attach events to HTML tags in the Javascript using the attributes class and id
![Page 28: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/28.jpg)
28
Unobtrusive Javascript
• Examine this code:window.onload = prepareLinks;function prepareLinks() {
var links = document.getElementsByTagName(‘a’);for (var i=0; i<links.length; i++) {
if (links[i].className == “popup”) {links[i].onclick = function() {
popUp(this.getAttribute(“href”));return false;}
}}
}
Attaches code to the onclick event of tags which have been identified by their class name
![Page 29: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/29.jpg)
29
Using Unobtrusive Javascript• Hands On• Open JavascriptDOM4.html• Remove the onclick event handlers• In each a tag put the attribute class=“popup”• Enter the code from the example given so that it
is unobtrusively called from the onclick event
• Also enter this code to open a popup window:function popUp(winURL) {
window.open(winURL,”popup”,”width=320,height=480”);
}
![Page 30: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/30.jpg)
30
Backwards Compatibility
• Although most browsers fully support the DOM, some do not support it completely.
• Browser sniffing is too convoluted, so best to check for specific features
• Put this line of code at the beginning of a function if (!document.getElementsByTagName) return false;
• So, if the browser does not support this method the function will stop
![Page 31: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/31.jpg)
31
Tidying Up
• Hands On• To follow through the principle of completely separating
the three layers, we need to put all our Javascript in a separate file
• Open JavascriptDOM4.html• Put the Javascript code into a new file called
javascriptdom4.js• Put a link into the head:• <script type=“text/javascript” language=“javascript”
src=“javascriptdom4.js” />• Put checks into the code to ensure that your page
gracefully degrades if the user’s browser does not have sufficient level of support for Javascript
![Page 32: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/32.jpg)
32
innerHTML
• Hands On• In the body of a blank HTML page insert a div
tag:<div id=“test”>This will be replaced</div>
• In the head of the page place this code:window.onload = function() {var testdiv = document.getElementBy Id(“testdiv”);testdiv.innerHTML = “<p>Now we have inserted
<em>this</em> instead!</p>”;}
![Page 33: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/33.jpg)
33
Using innerHTML
• All the HTML in the tag is replaced when the innerHTML method is used
• innerHTML is not part of the DOM – so it may one day disappear – though it is universally recognised by browsers
• Tags within the innerHTML are not part of the DOM tree so they cannot be manipulated
![Page 34: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/34.jpg)
34
Recap• Hands On• Now let us use the DOM to insert the same HTML into the div
tag1. Create an element node “p” assigned to the variable para2. Create a text node assigned to the variable txt1 (‘Now we
have inserted’)3. Append txt1 to para4. Create an element node em assigned to the variable
emphasis5. Append emphasis to para6. Create a text node assigned to the variable txt2 (‘this’)7. Append txt2 to emaphasis8. Append emphasis to para9. Create a text node assigned to the variable txt3 (‘instead!’)10.Append txt3 to para11.Append para to the element testdiv in the document
![Page 35: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/35.jpg)
35
Javascript and CSS
• Hands On• Open file JavascriptDOM6.html and
examine the code• Now try out each of the 3 user events• What do you notice about the difference
between appendChild and insertBefore?Syntax of insertBefore:
parentElement.insertBefore(newElement, targetElement)
![Page 36: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/36.jpg)
36
Points about CSS
• If style is set inline, it can be manipulated using Javascript
• If style is set by CSS, Javascript cannot directly manipulate it
• However, Javascript can set the style of the element and override the CSS
• Also, Javascript can indirectly manipulate style using the class tag
![Page 37: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/37.jpg)
37
Changing the Class Attribute
• A useful way of manipulating style through Javascript is to add a second class to an element eg:thiselement.className += “ newclass”;– adds the class ‘newclass’ to the class attribute
• Hands On• Open file JavascriptDOM7.html• Create a style for the tags with the class plain• Create a further style with more emphasis called
‘emphatic’• Write Javascript code that adds the emphatic class to an
element as the user mouseovers and removes it when the user mouseouts
![Page 38: Javascript DOM](https://reader036.vdocument.in/reader036/viewer/2022081501/568133f9550346895d9aede5/html5/thumbnails/38.jpg)
38
Objectives
• Understand the nature and structure of the DOM
• Add and remove content from the page
• Access and change element attributes – including source and class
• Insert markup into a page using innerHTML
• Change style attribute using Javascript