0% found this document useful (0 votes)
103 views24 pages

Dom

The document discusses various techniques for manipulating the DOM using JavaScript, including: 1) Removing nodes using removeChild(); 2) Selecting groups of elements using getElementsByTagName(); 3) Traversing the node tree using childNodes, firstChild, lastChild etc.; 4) Getting and setting attribute values using getAttribute() and setAttribute().

Uploaded by

Saurabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
103 views24 pages

Dom

The document discusses various techniques for manipulating the DOM using JavaScript, including: 1) Removing nodes using removeChild(); 2) Selecting groups of elements using getElementsByTagName(); 3) Traversing the node tree using childNodes, firstChild, lastChild etc.; 4) Getting and setting attribute values using getAttribute() and setAttribute().

Uploaded by

Saurabh Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

• 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

You might also like