Dom
Upcoming SlideShare
Loading in...5
×
 

 

Statistics

Views

Total Views
339
Views on SlideShare
339
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Dom Dom Presentation Transcript

    • 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
    • DOM Sarbazali.N sarbazalin@gmail.com Sarbaz Ali twitter.com/username in.linkedin.com/in/profilena me 9037896770
    • 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
    • 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
    • DOM Tree
    • 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
    • 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>
    • Traversing DOM tree • Traversal through node properties – childNodes property – firstChild, lastChild properties – nextSibling, previousSibling properties – parentNode property
    • 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>
    • 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
    • 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