Java Script and HTML.

1,406 views

Published on

A simple tutorial to edit the HTML using Java Script

Published in: Automotive
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,406
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
79
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Java Script and HTML.

  1. 1. SLICING AND PLAYING WITH HTML Learning Java Script Editing
  2. 2. What is it?  Slicing HTML involves playing with the stuff on the HTML Page like “divs”, “select boxes”, “input boxes” and much-much more
  3. 3. Some key points  Every element is associated with the ID. ID is used to access that object on the HTML page. And document.getElementById(“element_name”) will give you the power to access that element on the page. Now you are just one step away from altering/modifying the HTML page.
  4. 4. Key Points Cont…  document.getElementByTagsName(“div”) will give you all the divs on the page. Again one step away from editing the page. Isnt is simple?
  5. 5. Key Points Cont…  Inner HTML can be used to set the content of the page. The good/bad thing about Inner html is that it over writes what ever content is already associated with that element. Inner HTML replaces (over rides) already existing conetnt.
  6. 6. Document Object Model <html> <head></head> <body> <p id=”story”> Hey <strong>Akshat</strong> </p> </body> </html>
  7. 7. Main Properties to consider in the Dom tree  nodeValue  nodeType  firstChild  lastChild  childNodes
  8. 8. What this refers to in the HTML  Document.getElementByTagsName(“body”)[0].child Nodes[1].lastChild.  Answer :- strong.  Refer slide number 6 for HTML
  9. 9. Changing the node text var node = document.getElementBId(“story”); while(node.firstchild) node.removechild(node.firstchild); node.appendchild(document.createTextNode(“OK Finally”));
  10. 10. Creating a new Element var paragraph =document.createElement(p) – Just specify the tag name here paragraph.appendchild(document.createTextNode(“T he text in the paragraph”)); document.getElementbyId(“story”).appendchild(parag raph);

×