Javascript Dom
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
2
head
body
title
text
text
my page
What is a Node?
Element Node contains an HTML tag Text Node contains text Text Nodes are contained in Element Nodes
10
11
12
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 On Modify your HTML page so that the user can click on some text to remove the text that was inserted
13
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
14
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?
15
firstChild
reference = node.firstChild
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()
18
Try this in Firefox Point to consider: why is this attribute called className?
19
21
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
22
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
23
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;"
24
The page should be constructed using 3 different files one for each layer
25
Progressive Enhancement
Graceful Degradation
Does this degrade gracefully?
<a href=# onclick=popUp(http://www.example.com); return false;)>Link to Example</a>
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
27
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
28
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
30
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 users browser does not have sufficient level of support for Javascript
31
innerHTML
Hands On In the body of a blank HTML page insert a div tag:
<div id=test>This will be replaced</div>
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
33
Recap
Hands On Now let us use the DOM to insert the same HTML into the div tag 1. Create an element node p assigned to the variable para 2. Create a text node assigned to the variable txt1 (Now we have inserted) 3. Append txt1 to para 4. Create an element node em assigned to the variable emphasis 5. Append emphasis to para 6. Create a text node assigned to the variable txt2 (this) 7. Append txt2 to emaphasis 8. Append emphasis to para 9. Create a text node assigned to the variable txt3 (instead!) 10.Append txt3 to para 11.Append para to the element testdiv in the document 34
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
37
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
38