Your SlideShare is downloading. ×
Dom
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
  • 2. DOM Sarbazali.N sarbazalin@gmail.com Sarbaz Ali twitter.com/username in.linkedin.com/in/profilena me 9037896770
  • 3. DOM Concept • DOM makes all components of a web page accessible – HTML elements – their attributes – text • They can be created, modified and removed with JavaScript
  • 4. DOM Objects • DOM components are accessible as objects or collections of objects • DOM components form a tree of nodes • relationship parent node – children nodes • document is the root node • Attributes of elements are accessible as text
  • 5. DOM Tree
  • 6. Accessing Nodes by id • Access to elements by their id – document.getElementById(<id>) • returns the element with id <id> – id attribute can be defined in each start tag • The preferred way to access elements
  • 7. Other Access Methods • Access by elements' tag – there are typically several elements with the same tag – document.getElementsByTagName(<tag>) – e.g. • var p = document.getElementsByTagName(“p"); • Access by elements' name attribute – several elements can have the same name – document.getElementsByName(<name>) • returns the collection of elements with name <name>
  • 8. Traversing DOM tree • Traversal through node properties – childNodes property – firstChild, lastChild properties – nextSibling, previousSibling properties – parentNode property
  • 9. A Javascript Example Alert Datatype <html> <head></head> <title>Check Datatype</title> <script language="javascript"> function datatype() { Var data = document.getElementById("d1").value; if(isNaN(data)) { alert("string"); } else { alert("number"); } } </script> <body> <input type="text" id="d1" name="value1"/></br> <input type="button" name="Sumbit" value=“Display Datatype" onclick="datatype()"/></br> </body> </html>
  • 10. If this presentation helped you, please visit our page facebook.com/baabtra and like it. Thanks in advance. www.baabtra.com | www.massbaab.com |www.baabte.com
  • 11. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com