• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week5
 

Week5

on

  • 1,713 views

 

Statistics

Views

Total Views
1,713
Views on SlideShare
322
Embed Views
1,391

Actions

Likes
0
Downloads
3
Comments
0

5 Embeds 1,391

http://211.221.225.228 1212
http://223.195.109.161 116
http://211.221.225.228:8080 60
http://localhost 2
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week5 Week5 Presentation Transcript

    • HTML DOM-III and CSS DOM
    • Copying Nodes
      • cloneNode(boolean)
        • To make a copy of a particular node.
        • If input argument is true, then child nodes are also copied
        • If input argument is false, then child nodes are not copied
    • Example of cloneNode()
      • <body>
      • <p id=“p1”> This is <em>text</em> of cloning </p>
      • <hr>
      • <div id=“insertHere” style=“background-color:yellow”> </div>
      • <hr>
      • </body>
      • function cloneAndCopy()
      • {
      • var toClone = document.getElementById(“p1”);
      • var newNode = toClone.cloneNode(true);
      • var idInsert = document.getElementById(“insertHere”);
      • idInsert.append(newNode);
      • }
    • Example of cloneNode()
      • <body>
      • <p id=“p1”> This is <em>text</em> of cloning </p>
      • <hr>
      • <div id=“insertHere” style=“background-color:yellow”> </div>
      • <hr>
      • </body>
      • function clone()
      • {
      • var toClone = document.getElementById(“p1”);
      • var newNode = toClone.cloneNode(false);
      • var idInsert = document.getElementById(“insertHere”);
      • idInsert.append(newNode);
      • }
    • Delete Child Nodes
      • To remove a node from document Tree
        • removeChild(childNode)
          • Removes childNode from the document Tree.
      • Example:
        • var lostChild = current.removeChild(current.lastChild);
    • Example of removeChild()
      • <body>
      • <div id=“toDelete”>
      • <p> This is paragraph1</p>
      • <p> This is paragraph2</p>
      • <p> This is paragraph3</p>
      • </div>
      • </body>
      • function delete()
      • {
      • // get reference of <div id=“toDelete”> node in del variable
      • var del = document.getElementById(“toDelete”);
      • // check if del has child Nodes
      • if (del.hasChildNodes())
      • del.removeChild(del.lastChild);
      • }
    • Replace Child Nodes
      • To replace a node with another node, we use
        • replaceChild(newChild,oldChild) ;
        • Where newChild is the node that replace oldChild.
    • Example of replaceChild()
      • <body>
      • <div id=“toDelete”>
      • <p> This is paragraph1</p>
      • <p> This is paragraph2</p>
      • <p> This is paragraph3</p>
      • </div>
      • </body>
      • function replace()
      • {
      • // get reference of <div id=“toDelete”> node in del variable
      • var del = document.getElementById(“toDelete”);
      • // create a new child node <strong>
      • var newNode = document.createElement(“strong”);
      • // create a new text node
      • var textNode = document.createTextNode(“I am strong”);
      • // insert textNode as child of newNode
      • newNode.appendChild(textNode);
      • // replace last child of del node with newNode.
      • del.replaceChild(newNode,del.lastChild)
      • }
    • Modifying Nodes
      • We cannot modify nodes.
      • We can replace a node using replaceChild ()
      • But we can modify attributes of node using
        • nodeName.length
        • nodeName.data
        • nodeName.appendData(string)
        • nodeName.deleteData(offset,count)
        • nodeName.insertData(offset,string)
        • nodeName.replaceData(offset,count,string)
        • nodeName.splitText(offset)
        • nodeName.substringData(offset,count)
    • Example of nodeName.length
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Dislay the length of fc.
      • alert(“Length is = ” + fc.length );
      • }
    • Example of nodeName.data
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Dislay the length of fc.
      • alert(“Data of first Child is = ” + fc.data );
      • }
    • Example of changing data using nodeName.data
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Dislay the data.
      • fc.data = “I am new data”;
      • }
    • Example of appending data using nodeName.appendData()
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Add String at the end of text.
      • fc.appendData(“Add me at the end”);
      • }
    • Example of deleting data using nodeName.deleteData()
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Delete “is ” from the text.
      • fc.deleteData(5,3);
      • }
    • Example of inserting data using nodeName.insertData()
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Insert “my ” at 8 th position in text.
      • fc.insertData(8, “my ”) ;
      • }
    • Example of replacing data using nodeName.replaceData()
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Replace “is ” by “my ”.
      • fc.replaceData(5,3,“my ”);
      • }
    • Example of splitting data using nodeName.splitText()
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // split fc.data into 2 parts, rightText stores the right part and fc stores the left part.
      • rightText = fc.splitText(7);
      • alert(“Right Text = ” + rightText.data);
      • alert(“Left Text = ” + fc.data) ;
      • }
    • Example of nodeName.subStringData(i1,count)
      • <body>
      • <p id=“p1”> This is paragraph1</p>
      • <p id=“p2”> This is paragraph2</p>
      • <p id=“p3”> This is paragraph3</p>
      • </body>
      • function display()
      • {
      • // get reference of <p id=“p1”> node in pid variable
      • var pid = document.getElementById(“p1”);
      • // get reference of first child of pid in fc variable
      • var fc = pid.firstChild;
      • // Returns a string corresponding to the substring starting at index i1 and ending at ocunt
      • var subString = fc.subStringData(0,4) ;
      • alert(subString); // please note this is not subString.data
      • alert(fc.data);
      • }
    • Manipulating Attributes
      • To manipulate attributes of a tag, methods available are
        • getAttribute(attributeName)
          • Returns the value for attributeName
        • setAttribute(attributeName,attributeValue)
          • Sets a new value attributeValue for attributeName
        • removeAttribute(attributeName)
          • Remove attribute attributeName
        • hasAttributes()
          • Returns true, if a tag has attribute. Otherwise false.
    • Example of getAttribute()
      • <body>
      • <font id=“f1” size=“2” color=“red”> I am RED </font>
      • </body>
      • function display()
      • {
      • // get reference of <font id=“f1”> node in fid variable
      • var fid = document.getElementById(“f1”);
      • alert(fid.getAttribute(“size”));
      • }
    • Example of setAttribute()
      • <body>
      • <font id=“f1” size=“2” color=“red”> I am RED </font>
      • </body>
      • function display()
      • {
      • // get reference of <font id=“f1”> node in fid variable
      • var fid = document.getElementById(“f1”);
      • fid.setAttribute(“color”,”green”);
      • }
    • Example of removeAttribute()
      • <body>
      • <font id=“f1” size=“2” color=“red”> I am RED </font>
      • </body>
      • function display()
      • {
      • // get reference of <font id=“f1”> node in fid variable
      • var fid = document.getElementById(“f1”);
      • fid.removeAttribute(“color”);
      • }
    • CSS DOM
      • DOM Level 2 support changing CSS dynamically.
      • CSS properties are of 3 types
        • Inline
        • Internal
        • external
      • For example of changing inline CSS style
      • <p id=“p1” style=“color:red”>
      • This is paragraph
      • </p1>
      • pid = document.getElementById(“p1”);
      • p1.style.color =“green” ;// color will change to green
    • CSS DOM
      • Every CSS property can be used in DOM.
      • But some properties name changes in DOM.
      • For ex:
      • background-color changes to backgroundColor
      • All properties with “-” inside in CSS are used with “-” removed in DOM.
      • Float changes to cssfloat,
      • because float is a “JavaScript reserved work”
      • For all properties refer to Table 10-6 in book .
    • Modify CSS internal Style
      • Slide 23 showed us an example of modifying inline style.
      • With modifying inline, we can only modify 1 tag at one time.
      • What if we want to modify internal style
      • To modify internal style, see an example
    • Modify CSS Internal Style
      • <style type=“text/css”>
      • .look1 {color:black; background-color:yellow;font-style:normal;}
      • .look2 {background-color:orange; font-style:italic}
      • </style>
      • <body>
      • <p id=“p1” class=“look1”> This is text </p>
      • </body>
      • // get the reference of <p id=“p1”> in variable pid
      • pid = document.getElementById(“p1”);
      • // change the class Name to look2.
      • pid.className = “look2”;
    • Mouse RollOver using DOM and CSS
      • <style type=&quot;text/css&quot;>
        • .look1 {color:blue;font-weight:bold; width:80;}
        • .look2 {background-color:yellow; color:red;text-decoaration:null;width:80;}
      • </style>
      • <body>
      • <p id=“p1” class=“look2” onMouseOver=“change()” onMouseOut=“back()”>
      • This is text
      • </p>
      • </body>
      • function change()
      • {
      • // get the reference of <p id=“p1”> in variable pid
      • pid = document.getElementById(“p1”);
      • // change the class Name to look1.
      • pid.className = “look1”;
      • }
      • function back()
      • {
      • pid = document.getElementById(“p1”);
      • pid.className = “look2”;
      • }