Dom
4,225 views
14 slides
Aug 05, 2015
Slide 1 of 14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
About This Presentation
No description available for this slideshow.
Slide Content
Me presentation on document object model prepared by : upadhyay rakshita R. Er No : 140370707018 Roll No : 24
Contents…. 2 Introduction How DOM works? Document tree HTML DOM access nodes DOM Properties DOM Methods References 5/1/2015
Introduction The HTML DOM defines a standard way for accessing and manipulating HTML documents . It presents an HTML document as a tree-structure with elements, attributes, and text . With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page. 5/1/2015 3
This access, along with methods and properties to add, move, change, or remove HTML elements, is given through DOM. The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents. 5/1/2015 4
5 How the DOM works? <head><script> function toggle() { document.img.button1.src=“button_on.gif”; } </script></head> < body> <a href =“test.html” onmouseover =“toggle()”> < img name=“button1” src =“button_off.gif”></a> </ body> action reaction Action Event JavaScript DOM Reaction src = “ button_off.gif ” onmouseover toggle() document.img.button1 Src= “ button_on.gif ” User moves mouse over object Event senses that something happened to the object JavaScript tells the object what to do (Even handler) Locates object on the web page Object ’ s image source is changed 5/1/2015
Document Tree (Node Tree) <html> <head> <title> My title </title> </head> <body> <h1> My header </h1> < a href=“http://.... > My link </ a > </body> </html> 5/1/2015 6
Document Tree (Node Tree) 5/1/2015 7
HTML DOM Example <html> <head> <script type="text/ javascript "> function ChangeColor () { document.body.bgColor ="yellow" } </script> </head> <body onclick =" ChangeColor ()"> Click on this document! </body> </html> 5/1/2015 8
HTML DOM Access Nodes The getElementById () method returns the element with the specified ID: document.getElementById (" someID "); The getElementsByTagName () method returns all elements (as a nodeList ) with the specified tag name . document.getElementsByTagName ("p"); 5/1/2015 9
DOM Objects DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Image DOM Input Button DOM Input Checkbox DOM Input File DOM Input Hidden DOM Input Password DOM Input Radio DOM Input Reset DOM Input Submit DOM Input Text DOM Link DOM Meta DOM Object DOM Option DOM Select DOM Style DOM Table DOM TableCell DOM TableRow DOM Textarea 5/1/2015 10
DOM Properties 11 5/1/2015
DOM Methods 12 5/1/2015
References 13 www.w3school.com www.tutorialspoint.com/javascript 5/1/2015
5/1/2015 THANK YOU
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 4,225
- Slides 14
- Favorites 3
- Age 3772 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views