38
1 Javascript DOM Peter Atkinson

Javascript DOM

Embed Size (px)

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 Presentation

Citation preview

Page 1: Javascript DOM

1

Javascript DOM

Peter Atkinson

Page 2: Javascript DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17

Where on the Node Tree?

• childNodes– nodeList = node.childNodes

• firstChild– reference = node.firstChild

• lastChild

• nextSibling

• parentNode

• previousSibling

Page 18: Javascript DOM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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