SlideShare a Scribd company logo
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
JOBS APPLIED = 0
RESPONSES = 0
Nithil.pp
nithilp@gmail.com
facebook.com/ nithil
padinare peediyekal
twitter.com/nithilpp
in.linkedin.com/in/nithil.pp
9995223505
DOM STRUCTURE
Document Object Model (DOM)
• The Document Object Model (DOM) is a programming API for
HTML and XML documents.
• Defines the logical structure of documents and the way a
document is accessed and manipulated.
• An interface to allow programs and scripts to update content,
structure, and style of documents dynamically.
• The DOM is not HTML nor is it JavaScript.
• It is something like the glue that binds them together.
DOM Objects
• DOM components are accessible as objects or
collections of objects.
• In HTML DOM
o The entire document is a document node.
o Every HTML element is an element node.
o The Every HTML attribute is an attribute node
o text inside HTML elements are text nodes.
o Comments are comment nodes.
• DOM components form a tree of nodes called Node
Tree
• nodes in the node tree have a hierarchical relationship to
each other.
i.e, Parent node, child node and siblings
Fig : HTML DOM tree
example.
Fig : image illustrates a part of the node tree and the relationship between the nodes.
Programming Interface
• All HTML elements are defined as objects.
• the programming interface is the object methods and object
properties.
• A method is an action you can do.
• A property is a value that you can get or set.
getElementById(id) get the node (element) with a
specified id
appendChild(node) insert a new child node (element)
removeChild(node) remove a child node (element)
•HTML DOM methods:
•HTML DOM properties:
innerHTML the text value of a node (element)
parentNode the parent node of a node
(element)
childNodes the child nodes of a node (element)
attributes the attributes nodes of a node
(element)
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.
Other Access Methods
• Access by elements' tag
– there are typically several elements with the same tag
– document.getElementsByTagName(<tag>)
– e.g.
• var li = document.getElementsByTagName(“li")[0];
//to get first li of ul.
• 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
• the value is a collection of nodes
– has a length attribute
– an item can be reached by its index
• e.g. var body = html.childNodes[1];
– firstChild, lastChild properties
– nextSibling, previousSibling properties
– parentNode property
Document Object Model
<TABLE>
<ROWS>
<TR>
<TD>hi</TD>
<TD>there</TD>
</TR>
<TR>
<TD>hello</TD>
<TD>world</TD>
</TR>
</ROWS>
</TABLE>
Eg :JavaScript program to add two numbers.( Numbers are input
using textbox )
<html>
<head>
<script language="javascript">
function calculateNumbers()
{
var FirstNumber = document.getElementById("txtFirst").value;
FirstNumber = Number(FirstNumber);
var SecondNumber = document.getElementById("txtSecond").value;
SecondNumber = Number(SecondNumber);
var Total = (FirstNumber+SecondNumber);
document.frmCalculate.txtTotal.value = Total;
}
</script>
</head>
<body>
<form name="frmCalculate">
<input type="text" size="2" id="txtFirst" maxlength="2">+</input>
<input type="text" size="2" id="txtSecond" maxlength="2">=</input>
<input type="text" size="2" name="txtTotal" ></input><br>
<input type="button" value="Add" name="buttonCalculate"
onClick="calculateNumbers()"></input>
<input type="reset" value="Reset" name="buttonReset"></input>
</form>
</body>
</html>
Thank you…
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

More Related Content

What's hot

Lecture 1 oop
Lecture 1 oopLecture 1 oop
Lecture 1 oop
Tony Apreku
 
Oo ps concepts in c++
Oo ps concepts in c++Oo ps concepts in c++
Oo ps concepts in c++
Hemant Saini
 
Fundamentals of OOP (Object Oriented Programming)
Fundamentals of OOP (Object Oriented Programming)Fundamentals of OOP (Object Oriented Programming)
Fundamentals of OOP (Object Oriented Programming)
MD Sulaiman
 
Ah java-ppt2
Ah java-ppt2Ah java-ppt2
Ah java-ppt2
Haja Abdul Khader A
 
Object oriented programming concept- Saurabh Upadhyay
Object oriented programming concept- Saurabh UpadhyayObject oriented programming concept- Saurabh Upadhyay
Object oriented programming concept- Saurabh Upadhyay
Saurabh Upadhyay
 
Brownfield Domain Driven Design
Brownfield Domain Driven DesignBrownfield Domain Driven Design
Brownfield Domain Driven Design
Nicolò Pignatelli
 
Characteristics of oop
Characteristics of oopCharacteristics of oop
Characteristics of oop
Rasim Izhar Ali
 
Oops concept in c++ unit 3 -topic 4
Oops concept in c++ unit 3 -topic 4Oops concept in c++ unit 3 -topic 4
Oops concept in c++ unit 3 -topic 4
MOHIT TOMAR
 
itft-Fundamentals of object–oriented programming in java
itft-Fundamentals of object–oriented programming in javaitft-Fundamentals of object–oriented programming in java
itft-Fundamentals of object–oriented programming in java
Atul Sehdev
 
Oops
OopsOops
Introduction to OOP concepts
Introduction to OOP conceptsIntroduction to OOP concepts
Introduction to OOP concepts
Ahmed Farag
 
Object oriented programming (oop) cs304 power point slides lecture 01
Object oriented programming (oop)   cs304 power point slides lecture 01Object oriented programming (oop)   cs304 power point slides lecture 01
Object oriented programming (oop) cs304 power point slides lecture 01
Adil Kakakhel
 
Object Oriented Programming Lecture Notes
Object Oriented Programming Lecture NotesObject Oriented Programming Lecture Notes
Object Oriented Programming Lecture Notes
FellowBuddy.com
 
OOPS Characteristics
OOPS CharacteristicsOOPS Characteristics
Object-oriented concepts
Object-oriented conceptsObject-oriented concepts
Object-oriented concepts
BG Java EE Course
 
Pursuing Domain-Driven Design practices in PHP
Pursuing Domain-Driven Design practices in PHPPursuing Domain-Driven Design practices in PHP
Pursuing Domain-Driven Design practices in PHP
Giorgio Sironi
 
Characteristics of OOPS
Characteristics of OOPS Characteristics of OOPS
Characteristics of OOPS
abhishek kumar
 
CSS
CSSCSS
Introduction to object oriented programming
Introduction to object oriented programmingIntroduction to object oriented programming
Introduction to object oriented programming
Abzetdin Adamov
 
Java
JavaJava

What's hot (20)

Lecture 1 oop
Lecture 1 oopLecture 1 oop
Lecture 1 oop
 
Oo ps concepts in c++
Oo ps concepts in c++Oo ps concepts in c++
Oo ps concepts in c++
 
Fundamentals of OOP (Object Oriented Programming)
Fundamentals of OOP (Object Oriented Programming)Fundamentals of OOP (Object Oriented Programming)
Fundamentals of OOP (Object Oriented Programming)
 
Ah java-ppt2
Ah java-ppt2Ah java-ppt2
Ah java-ppt2
 
Object oriented programming concept- Saurabh Upadhyay
Object oriented programming concept- Saurabh UpadhyayObject oriented programming concept- Saurabh Upadhyay
Object oriented programming concept- Saurabh Upadhyay
 
Brownfield Domain Driven Design
Brownfield Domain Driven DesignBrownfield Domain Driven Design
Brownfield Domain Driven Design
 
Characteristics of oop
Characteristics of oopCharacteristics of oop
Characteristics of oop
 
Oops concept in c++ unit 3 -topic 4
Oops concept in c++ unit 3 -topic 4Oops concept in c++ unit 3 -topic 4
Oops concept in c++ unit 3 -topic 4
 
itft-Fundamentals of object–oriented programming in java
itft-Fundamentals of object–oriented programming in javaitft-Fundamentals of object–oriented programming in java
itft-Fundamentals of object–oriented programming in java
 
Oops
OopsOops
Oops
 
Introduction to OOP concepts
Introduction to OOP conceptsIntroduction to OOP concepts
Introduction to OOP concepts
 
Object oriented programming (oop) cs304 power point slides lecture 01
Object oriented programming (oop)   cs304 power point slides lecture 01Object oriented programming (oop)   cs304 power point slides lecture 01
Object oriented programming (oop) cs304 power point slides lecture 01
 
Object Oriented Programming Lecture Notes
Object Oriented Programming Lecture NotesObject Oriented Programming Lecture Notes
Object Oriented Programming Lecture Notes
 
OOPS Characteristics
OOPS CharacteristicsOOPS Characteristics
OOPS Characteristics
 
Object-oriented concepts
Object-oriented conceptsObject-oriented concepts
Object-oriented concepts
 
Pursuing Domain-Driven Design practices in PHP
Pursuing Domain-Driven Design practices in PHPPursuing Domain-Driven Design practices in PHP
Pursuing Domain-Driven Design practices in PHP
 
Characteristics of OOPS
Characteristics of OOPS Characteristics of OOPS
Characteristics of OOPS
 
CSS
CSSCSS
CSS
 
Introduction to object oriented programming
Introduction to object oriented programmingIntroduction to object oriented programming
Introduction to object oriented programming
 
Java
JavaJava
Java
 

Viewers also liked

Exceptions in python
Exceptions in pythonExceptions in python
Servlet
ServletServlet
Industrial training it industry session 1
Industrial training it industry session 1Industrial training it industry session 1
Industrial training it industry session 1
baabtra.com - No. 1 supplier of quality freshers
 
Pythonclass
PythonclassPythonclass
Pygtk
PygtkPygtk
Jvm
JvmJvm
Xml
XmlXml
Asp .net folders and web.config
Asp .net folders and web.configAsp .net folders and web.config
Asp .net folders and web.config
baabtra.com - No. 1 supplier of quality freshers
 

Viewers also liked (8)

Exceptions in python
Exceptions in pythonExceptions in python
Exceptions in python
 
Servlet
ServletServlet
Servlet
 
Industrial training it industry session 1
Industrial training it industry session 1Industrial training it industry session 1
Industrial training it industry session 1
 
Pythonclass
PythonclassPythonclass
Pythonclass
 
Pygtk
PygtkPygtk
Pygtk
 
Jvm
JvmJvm
Jvm
 
Xml
XmlXml
Xml
 
Asp .net folders and web.config
Asp .net folders and web.configAsp .net folders and web.config
Asp .net folders and web.config
 

Similar to Dom structures

Dom
DomDom
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
GOPAL BASAK
 
6867389.ppt
6867389.ppt6867389.ppt
6867389.ppt
SunilChaluvaiah
 
6867389.ppt
6867389.ppt6867389.ppt
6867389.ppt
SunilChaluvaiah
 
6867389 (1).ppt
6867389 (1).ppt6867389 (1).ppt
6867389 (1).ppt
SunilChaluvaiah
 
Dom in javascript
Dom in javascriptDom in javascript
Dom in javascript
Mudasir Syed
 
WEB TECHNOLOGY Unit-4.pptx
WEB TECHNOLOGY Unit-4.pptxWEB TECHNOLOGY Unit-4.pptx
WEB TECHNOLOGY Unit-4.pptx
karthiksmart21
 
Web technologies-course 09.pptx
Web technologies-course 09.pptxWeb technologies-course 09.pptx
Web technologies-course 09.pptx
Stefan Oprea
 
Dom date and objects and event handling
Dom date and objects and event handlingDom date and objects and event handling
Dom date and objects and event handling
smitha273566
 
HTML_DOM
HTML_DOMHTML_DOM
HTML_DOM
BIT DURG
 
Dom
DomDom
Dom structure
Dom structureDom structure
Dom structure
Dom structureDom structure
DOM(Document Object Model) in javascript
DOM(Document Object Model) in javascriptDOM(Document Object Model) in javascript
DOM(Document Object Model) in javascript
Rashmi Mishra
 
Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponents
Gil Fink
 
Document Object Model
Document Object ModelDocument Object Model
Web components
Web componentsWeb components
Web components
Gil Fink
 
Document object model
Document object modelDocument object model
Document object model
Amit kumar
 
9781305078444 ppt ch05
9781305078444 ppt ch059781305078444 ppt ch05
9781305078444 ppt ch05
Terry Yoast
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
Gil Fink
 

Similar to Dom structures (20)

Dom
DomDom
Dom
 
Document Object Model (DOM)
Document Object Model (DOM)Document Object Model (DOM)
Document Object Model (DOM)
 
6867389.ppt
6867389.ppt6867389.ppt
6867389.ppt
 
6867389.ppt
6867389.ppt6867389.ppt
6867389.ppt
 
6867389 (1).ppt
6867389 (1).ppt6867389 (1).ppt
6867389 (1).ppt
 
Dom in javascript
Dom in javascriptDom in javascript
Dom in javascript
 
WEB TECHNOLOGY Unit-4.pptx
WEB TECHNOLOGY Unit-4.pptxWEB TECHNOLOGY Unit-4.pptx
WEB TECHNOLOGY Unit-4.pptx
 
Web technologies-course 09.pptx
Web technologies-course 09.pptxWeb technologies-course 09.pptx
Web technologies-course 09.pptx
 
Dom date and objects and event handling
Dom date and objects and event handlingDom date and objects and event handling
Dom date and objects and event handling
 
HTML_DOM
HTML_DOMHTML_DOM
HTML_DOM
 
Dom
DomDom
Dom
 
Dom structure
Dom structureDom structure
Dom structure
 
Dom structure
Dom structureDom structure
Dom structure
 
DOM(Document Object Model) in javascript
DOM(Document Object Model) in javascriptDOM(Document Object Model) in javascript
DOM(Document Object Model) in javascript
 
Build Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponentsBuild Reusable Web Components using HTML5 Web cComponents
Build Reusable Web Components using HTML5 Web cComponents
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Web components
Web componentsWeb components
Web components
 
Document object model
Document object modelDocument object model
Document object model
 
9781305078444 ppt ch05
9781305078444 ppt ch059781305078444 ppt ch05
9781305078444 ppt ch05
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 

More from baabtra.com - No. 1 supplier of quality freshers

Agile methodology and scrum development
Agile methodology and scrum developmentAgile methodology and scrum development
Agile methodology and scrum development
baabtra.com - No. 1 supplier of quality freshers
 
Best coding practices
Best coding practicesBest coding practices
Core java - baabtra
Core java - baabtraCore java - baabtra
Acquiring new skills what you should know
Acquiring new skills   what you should knowAcquiring new skills   what you should know
Acquiring new skills what you should know
baabtra.com - No. 1 supplier of quality freshers
 
Baabtra.com programming at school
Baabtra.com programming at schoolBaabtra.com programming at school
Baabtra.com programming at school
baabtra.com - No. 1 supplier of quality freshers
 
99LMS for Enterprises - LMS that you will love
99LMS for Enterprises - LMS that you will love 99LMS for Enterprises - LMS that you will love
99LMS for Enterprises - LMS that you will love
baabtra.com - No. 1 supplier of quality freshers
 
Php sessions & cookies
Php sessions & cookiesPhp sessions & cookies
Php database connectivity
Php database connectivityPhp database connectivity
Chapter 6 database normalisation
Chapter 6  database normalisationChapter 6  database normalisation
Chapter 6 database normalisation
baabtra.com - No. 1 supplier of quality freshers
 
Chapter 5 transactions and dcl statements
Chapter 5  transactions and dcl statementsChapter 5  transactions and dcl statements
Chapter 5 transactions and dcl statements
baabtra.com - No. 1 supplier of quality freshers
 
Chapter 4 functions, views, indexing
Chapter 4  functions, views, indexingChapter 4  functions, views, indexing
Chapter 4 functions, views, indexing
baabtra.com - No. 1 supplier of quality freshers
 
Chapter 3 stored procedures
Chapter 3 stored proceduresChapter 3 stored procedures
Chapter 2 grouping,scalar and aggergate functions,joins inner join,outer join
Chapter 2  grouping,scalar and aggergate functions,joins   inner join,outer joinChapter 2  grouping,scalar and aggergate functions,joins   inner join,outer join
Chapter 2 grouping,scalar and aggergate functions,joins inner join,outer join
baabtra.com - No. 1 supplier of quality freshers
 
Chapter 1 introduction to sql server
Chapter 1 introduction to sql serverChapter 1 introduction to sql server
Chapter 1 introduction to sql server
baabtra.com - No. 1 supplier of quality freshers
 
Chapter 1 introduction to sql server
Chapter 1 introduction to sql serverChapter 1 introduction to sql server
Chapter 1 introduction to sql server
baabtra.com - No. 1 supplier of quality freshers
 
Microsoft holo lens
Microsoft holo lensMicrosoft holo lens
Blue brain
Blue brainBlue brain
5g
5g5g
Aptitude skills baabtra
Aptitude skills baabtraAptitude skills baabtra
Gd baabtra
Gd baabtraGd baabtra

More from baabtra.com - No. 1 supplier of quality freshers (20)

Agile methodology and scrum development
Agile methodology and scrum developmentAgile methodology and scrum development
Agile methodology and scrum development
 
Best coding practices
Best coding practicesBest coding practices
Best coding practices
 
Core java - baabtra
Core java - baabtraCore java - baabtra
Core java - baabtra
 
Acquiring new skills what you should know
Acquiring new skills   what you should knowAcquiring new skills   what you should know
Acquiring new skills what you should know
 
Baabtra.com programming at school
Baabtra.com programming at schoolBaabtra.com programming at school
Baabtra.com programming at school
 
99LMS for Enterprises - LMS that you will love
99LMS for Enterprises - LMS that you will love 99LMS for Enterprises - LMS that you will love
99LMS for Enterprises - LMS that you will love
 
Php sessions & cookies
Php sessions & cookiesPhp sessions & cookies
Php sessions & cookies
 
Php database connectivity
Php database connectivityPhp database connectivity
Php database connectivity
 
Chapter 6 database normalisation
Chapter 6  database normalisationChapter 6  database normalisation
Chapter 6 database normalisation
 
Chapter 5 transactions and dcl statements
Chapter 5  transactions and dcl statementsChapter 5  transactions and dcl statements
Chapter 5 transactions and dcl statements
 
Chapter 4 functions, views, indexing
Chapter 4  functions, views, indexingChapter 4  functions, views, indexing
Chapter 4 functions, views, indexing
 
Chapter 3 stored procedures
Chapter 3 stored proceduresChapter 3 stored procedures
Chapter 3 stored procedures
 
Chapter 2 grouping,scalar and aggergate functions,joins inner join,outer join
Chapter 2  grouping,scalar and aggergate functions,joins   inner join,outer joinChapter 2  grouping,scalar and aggergate functions,joins   inner join,outer join
Chapter 2 grouping,scalar and aggergate functions,joins inner join,outer join
 
Chapter 1 introduction to sql server
Chapter 1 introduction to sql serverChapter 1 introduction to sql server
Chapter 1 introduction to sql server
 
Chapter 1 introduction to sql server
Chapter 1 introduction to sql serverChapter 1 introduction to sql server
Chapter 1 introduction to sql server
 
Microsoft holo lens
Microsoft holo lensMicrosoft holo lens
Microsoft holo lens
 
Blue brain
Blue brainBlue brain
Blue brain
 
5g
5g5g
5g
 
Aptitude skills baabtra
Aptitude skills baabtraAptitude skills baabtra
Aptitude skills baabtra
 
Gd baabtra
Gd baabtraGd baabtra
Gd baabtra
 

Recently uploaded

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
Zilliz
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
SitimaJohn
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
Chart Kalyan
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
Jakub Marek
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
David Brossard
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 

Recently uploaded (20)

TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Building Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and MilvusBuilding Production Ready Search Pipelines with Spark and Milvus
Building Production Ready Search Pipelines with Spark and Milvus
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptxOcean lotus Threat actors project by John Sitima 2024 (1).pptx
Ocean lotus Threat actors project by John Sitima 2024 (1).pptx
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdfHow to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
How to Interpret Trends in the Kalyan Rajdhani Mix Chart.pdf
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)Main news related to the CCS TSI 2023 (2023/1695)
Main news related to the CCS TSI 2023 (2023/1695)
 
OpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - AuthorizationOpenID AuthZEN Interop Read Out - Authorization
OpenID AuthZEN Interop Read Out - Authorization
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 

Dom structures

  • 1.
  • 2. 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
  • 3.
  • 4. JOBS APPLIED = 0 RESPONSES = 0
  • 6. Document Object Model (DOM) • The Document Object Model (DOM) is a programming API for HTML and XML documents. • Defines the logical structure of documents and the way a document is accessed and manipulated. • An interface to allow programs and scripts to update content, structure, and style of documents dynamically. • The DOM is not HTML nor is it JavaScript. • It is something like the glue that binds them together.
  • 7. DOM Objects • DOM components are accessible as objects or collections of objects. • In HTML DOM o The entire document is a document node. o Every HTML element is an element node. o The Every HTML attribute is an attribute node o text inside HTML elements are text nodes. o Comments are comment nodes.
  • 8. • DOM components form a tree of nodes called Node Tree • nodes in the node tree have a hierarchical relationship to each other. i.e, Parent node, child node and siblings Fig : HTML DOM tree example.
  • 9. Fig : image illustrates a part of the node tree and the relationship between the nodes.
  • 10. Programming Interface • All HTML elements are defined as objects. • the programming interface is the object methods and object properties. • A method is an action you can do. • A property is a value that you can get or set.
  • 11. getElementById(id) get the node (element) with a specified id appendChild(node) insert a new child node (element) removeChild(node) remove a child node (element) •HTML DOM methods: •HTML DOM properties: innerHTML the text value of a node (element) parentNode the parent node of a node (element) childNodes the child nodes of a node (element) attributes the attributes nodes of a node (element)
  • 12. 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.
  • 13. Other Access Methods • Access by elements' tag – there are typically several elements with the same tag – document.getElementsByTagName(<tag>) – e.g. • var li = document.getElementsByTagName(“li")[0]; //to get first li of ul. • Access by elements' name attribute – several elements can have the same name – document.getElementsByName(<name>) • returns the collection of elements with name <name>
  • 14. Traversing DOM tree • Traversal through node properties – childNodes property • the value is a collection of nodes – has a length attribute – an item can be reached by its index • e.g. var body = html.childNodes[1]; – firstChild, lastChild properties – nextSibling, previousSibling properties – parentNode property
  • 16. Eg :JavaScript program to add two numbers.( Numbers are input using textbox ) <html> <head> <script language="javascript"> function calculateNumbers() { var FirstNumber = document.getElementById("txtFirst").value; FirstNumber = Number(FirstNumber); var SecondNumber = document.getElementById("txtSecond").value; SecondNumber = Number(SecondNumber); var Total = (FirstNumber+SecondNumber); document.frmCalculate.txtTotal.value = Total; } </script> </head> <body> <form name="frmCalculate"> <input type="text" size="2" id="txtFirst" maxlength="2">+</input> <input type="text" size="2" id="txtSecond" maxlength="2">=</input> <input type="text" size="2" name="txtTotal" ></input><br> <input type="button" value="Add" name="buttonCalculate" onClick="calculateNumbers()"></input> <input type="reset" value="Reset" name="buttonReset"></input> </form> </body> </html>
  • 18. 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
  • 19. 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