dom structure

19

Upload: baabtracom-first-coding-school-in-india

Post on 06-May-2015

160 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Dom structure
Page 2: Dom structure

Disclaimer: This presentation is prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

Page 3: Dom structure

WELCOME

Page 4: Dom structure

Midhun [email protected]@facebook.com twitter.com/midhunopusin.linkedin.com/pub/midhunsudhakar/86/a65/

a9b/Phonenumber

9995586182

DOM structure

Page 5: Dom structure

Contents

• What is DOM?• DOM history• DOM nodes• Example.

Page 6: Dom structure

What is DOM?

• Interface used for interacting with structure and content of a page.

• Defines the way a doc accessed and manipulated dynamically.

• From W3C.

Page 7: Dom structure

Tree-Structure

Page 8: Dom structure
Page 9: Dom structure

DOM history

• DOM Level 1-1998• DOM Level 2-2000• DOM Level 3-2004• DOM Level 3(under process).

Page 10: Dom structure

HTML DOM Node Tree (Document Tree)

All the nodes in a node tree have relationships to each other.

The tree structure is called a node-tree.

Node:- Parents, Children, and Siblings

Page 11: Dom structure

DOM<html>

<head><title>DOM</title>

</head> <body>

<h1>I am in DOM world</h1> <p id=“intro”>Hello DOM!</p>

</body> </html>

• The <html> node, the root node• <body> Is Child of<head>• <p>is the parent "Hello world!"

Page 12: Dom structure

DOM Properties and Methods

• A property is a value that you can get or set• A method is an action you can do

ex:<html>

<body>

<p id="demo"></p>

<script>document.getElementById("demo").innerHTML = "Hello World!";</script></body></html>

Page 13: Dom structure

Node PropertyProperties Of node :

• nodeName:Returns name of element.

• nodeValue:Returns value of element.

•nodeType:Returns type of node whether element or document etc.

Page 14: Dom structure

HTML DOM MethodsMethods Of node Interface:

• getElementByID(id)

• getElementsByTagName(name)

Page 15: Dom structure

HTML DOM MethodsMethods Of Document Interface:

• createElement(tagName) :

• createTextNode(text) :

• createAttribute(attributeName) :

Page 16: Dom structure

Javascript program to validate a registration form

CODE

Page 17: Dom structure

Want to learn more about programming or Looking to become a good programmer?

Are you wasting time on searching so many contents online?

Do you want to learn things quickly?

Tired of spending huge amount of money to become a Software professional?

Do an online course @ baabtra.com

We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.

Page 18: Dom structure

Follow us @ twitter.com/baabtra

Like us @ facebook.com/baabtra

Subscribe to us @ youtube.com/baabtra

Become a follower @ slideshare.net/BaabtraMentoringPartner

Connect to us @ in.linkedin.com/in/baabtra

Thanks in advance.

www.baabtra.com | www.massbaab.com |www.baabte.com

Page 19: Dom structure

Contact Us

Emarald Mall (Big Bazar Building)Mavoor Road, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550

NC Complex, Near Bus StandMukkam, Kozhikode,Kerala, India.Ph: + 91 – 495 40 25 550

Cafit Square,Hilite Business Park,Near Pantheerankavu,Kozhikode

Start up VillageEranakulam,Kerala, India.

Email: [email protected]