Scribd Logo
Upload

Welcome to Scribd!

  • Javascript Dom

    Uploaded by

    balus143
    339 views38 pages
    Javascript Dom

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Javascript Dom

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    339 views38 pages

    Javascript Dom

    Uploaded by

    balus143
    Javascript Dom

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 38

    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

    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
    3

    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

    text

    my page

    This is text on my page


    4

    What is a Node?
    Element Node contains an HTML tag Text Node contains text Text Nodes are contained in Element Nodes

    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
    6

    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)

    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.)

    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);

    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);

    10

    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);

    11

    Putting the 5 Steps Together


    Hands 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>

    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

    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


    16

    Where on the Node Tree?


    childNodes
    nodeList = node.childNodes

    firstChild
    reference = node.firstChild

    lastChild nextSibling parentNode previousSibling


    17

    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

    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?
    19

    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>
    20

    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

    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

    Web Page Architecture


    Graceful Degradation = your site is navigable by users who do not have Javascript Progressive Enhancement = page built in layers:
    Graceful Degradation

    Javascript for Functionality

    CSS for Presentation

    HTML for Markup

    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>

    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>
    26

    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

    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); }
    29

    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>

    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>; }
    32

    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

    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)
    35

    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
    36

    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
    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

    You might also like