0
Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
docu...
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 cr...
DOM Objects
• DOM components are accessible as objects or
collections of objects
• DOM components form a tree of nodes
• r...
DOM Tree
Accessing Nodes by id
• Access to elements by their id
– document.getElementById(<id>)
• returns the element with id <id>
...
Other Access Methods
• Access by elements' tag
– there are typically several elements with the same tag
– document.getElem...
Traversing DOM tree
• Traversal through node properties
– childNodes property
– firstChild, lastChild properties
– nextSib...
A Javascript Example
Alert Datatype
<html>
<head></head>
<title>Check Datatype</title>
<script language="javascript">
func...
If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.co...
Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, N...
Dom
Upcoming SlideShare
Loading in...5
×

Dom

210

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "Dom"

  1. 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. 2. DOM Sarbazali.N sarbazalin@gmail.com Sarbaz Ali twitter.com/username in.linkedin.com/in/profilena me 9037896770
  3. 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. 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. 5. DOM Tree
  6. 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. 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. 8. Traversing DOM tree • Traversal through node properties – childNodes property – firstChild, lastChild properties – nextSibling, previousSibling properties – parentNode property
  9. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×