Dom

• 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
• 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
• 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?
• 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
• Where on the Node Tree?
• • childNodes
• • nodeList = node.childNodes
• • firstChild
• • reference = node.firstChild
• • lastChild
• • nextSibling
• • parentNode
• previousSibling
• 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()
• 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’?
• 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>
• 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
• 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
• 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
• 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;"
• Javascript for Functionality Graceful Degradation Progressive Enhancement CSS for
Presentation HTML for Markup Web Page Architecture
• • Graceful Degradation = your site is navigable by users who do not have Javascript
• • Progressive Enhancement = page built in layers: The page should be constructed
using 3 different files – one for each layer
• 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> Graceful Degradation
• 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
• 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
• 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”); }
• 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
• 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
• 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>”; }
• 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
• Recap • Hands On • Now let us use the DOM to insert the same HTML into the div tag
• Create an element node “p” assigned to the variable para • Create a text node
assigned to the variable txt1 (‘Now we have inserted’) • Append txt1 to para • Create
an element node em assigned to the variable emphasis • Append emphasis to para •
Create a text node assigned to the variable txt2 (‘this’) • Append txt2 to emaphasis •
Append emphasis to para • Create a text node assigned to the variable txt3 (‘instead!’)
• Append txt3 to para • Append para to the element testdiv in the document
• 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)
• 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
• 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
• 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

Dom

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dom

Uploaded by

Copyright:

Available Formats

• Remove a Node

• • To remove a node, we use the element method removeChild(name

You might also like