Dom

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

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

Dom

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (16)

En vedette

En vedette (9)

Similaire à Dom

Similaire à Dom (20)

Plus de baabtra.com - No. 1 supplier of quality freshers

Plus de baabtra.com - No. 1 supplier of quality freshers (20)

Dernier

Dernier (20)

Dom