• Like
Dom
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
178
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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