Week5

1,650
-1

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,650
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week5

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

    Clipping is a handy way to collect important slides you want to go back to later.

×