SlideShare una empresa de Scribd logo
1 de 32
Signure Technology Pvt Ltd. www.signure.com Seminar for DOM – Document Object Model
HTML DOM ,[object Object],[object Object]
Tree-Structure (a node tree), with elements, attributes, and text.  ,[object Object],[object Object]
HTML DOM Introduction What is the DOM? "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." The DOM defines the  objects and properties  of all document elements, and the  methods  (interface) to access them.
DOM ,[object Object],[object Object],[object Object],[object Object],[object Object]
Features of DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML DOM Nodes ,[object Object],[object Object],[object Object],[object Object],[object Object],According to the DOM, everything in an HTML document is a node.
SAX Classes and Interfaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
HTML DOM Node Tree (Document Tree) ,[object Object],[object Object],[object Object],[object Object],[object Object]
DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DOM ,[object Object],[object Object],[object Object],[object Object],[object Object]
HTML DOM Properties and Methods ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XML DOM Methods ,[object Object],[object Object],[object Object],[object Object],[object Object]
Example ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HTML DOM Access Nodes ,[object Object],[object Object],[object Object],[object Object],[object Object]
The getElementById() Method ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The getElementsByTagName() Method ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example –  getElementsByTagName() ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
getElementsByTagName() ,[object Object],[object Object]
getElementsByTagName() <html> <body> <p id=&quot;intro&quot;>W3Schools example</p> <div id=&quot;main&quot;> <p id=&quot;main1&quot;>The DOM is very useful</p> <p id=&quot;main2&quot;>This example demonstrates how to use the <b>getElementsByTagName</b> method</p> </div> <script type=&quot;text/javascript&quot;> x=document.getElementById(&quot;main&quot;).getElementsByTagName(&quot;p&quot;); document.write(&quot;First paragraph inside the main div: &quot; + x[0].childNodes[0].nodeValue); </script> </body> </html>
DOM Node List Length ,[object Object],[object Object],[object Object]
Navigating Node Relationships ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Navigating Node Relationships ,[object Object],[object Object],[object Object],[object Object]
Root Nodes ,[object Object],[object Object],[object Object],[object Object],[object Object]
Node Property Everything in a document can be considered a node, including the document itself.   Properties Of Node Interface: •  nodeName : Returns name of element. •  nodeValue: Returns value of element. • nodeType :Returns type of node whether element or document etc. •  parentNode: Contains the parent node (for nodes that can have parents). • childNodes: Contains a node list containing the children (for nodes that can have children). •  firstChild : Contains the first child of this node.
Node Property ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Node Property ,[object Object],[object Object],[object Object],[object Object]
Node Property appendChild(newchild): Appends newChild as the last child of this node createTextNode =  This property used to create new text node. e.g. createTextNode(a); createElement = This property usedt to create element  e.g. createElement('tr');
Node List The nodeList object represents a node and its child nodes as a node tree.  Property of Nodelist: length: Returns an unsigned long integer indicating the number of nodes in the NodeList . Method of Nodelist: item(index): This method takes an index as its argument and returns the node at that index position.
Properties of Document: doctype:  Returns <!DOCTYPE information of document. implementation:  Returns implementation node. documentElement:  Returns root element of the document.
Methods of DOM ,[object Object],[object Object],[object Object],[object Object],[object Object]

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Dom
DomDom
Dom
 
Dom
Dom Dom
Dom
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Introduction to DOM
Introduction to DOMIntroduction to DOM
Introduction to DOM
 
The Document Object Model
The Document Object ModelThe Document Object Model
The Document Object Model
 
Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)
 
JavaScript DOM & event
JavaScript DOM & eventJavaScript DOM & event
JavaScript DOM & event
 
XML Document Object Model (DOM)
XML Document Object Model (DOM)XML Document Object Model (DOM)
XML Document Object Model (DOM)
 
Xml 215-presentation
Xml 215-presentationXml 215-presentation
Xml 215-presentation
 
introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5introduction to the document object model- Dom chapter5
introduction to the document object model- Dom chapter5
 
Xml 215-presentation
Xml 215-presentationXml 215-presentation
Xml 215-presentation
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
 
Dom structure
Dom structureDom structure
Dom structure
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Xml
XmlXml
Xml
 
DTD
DTDDTD
DTD
 
Understanding XML DOM
Understanding XML DOMUnderstanding XML DOM
Understanding XML DOM
 
Introduction to XML
Introduction to XMLIntroduction to XML
Introduction to XML
 
HTML and XML Difference FAQs
HTML and XML Difference FAQsHTML and XML Difference FAQs
HTML and XML Difference FAQs
 
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-7) [XML and AJAX] | NIC/NIELIT Web Technology
 

Similar a DOM Quick Overview (20)

Week4142
Week4142Week4142
Week4142
 
Processing XML with Java
Processing XML with JavaProcessing XML with Java
Processing XML with Java
 
Automating Ievb
Automating IevbAutomating Ievb
Automating Ievb
 
Dom structure
Dom structure Dom structure
Dom structure
 
What is xml
What is xmlWhat is xml
What is xml
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
 
Scripting The Dom
Scripting The DomScripting The Dom
Scripting The Dom
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
HTML literals, the JSX of the platform
HTML literals, the JSX of the platformHTML literals, the JSX of the platform
HTML literals, the JSX of the platform
 
Web Services Part 1
Web Services Part 1Web Services Part 1
Web Services Part 1
 
HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
JavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM ManipulationJavaScript: Ajax & DOM Manipulation
JavaScript: Ajax & DOM Manipulation
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Web Designing
Web DesigningWeb Designing
Web Designing
 
Session 2
Session 2Session 2
Session 2
 
Xml
XmlXml
Xml
 
Xml
XmlXml
Xml
 

Último

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesBoston Institute of Analytics
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 

Último (20)

The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

DOM Quick Overview

  • 1. Signure Technology Pvt Ltd. www.signure.com Seminar for DOM – Document Object Model
  • 2.
  • 3.
  • 4. HTML DOM Introduction What is the DOM? &quot;The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.&quot; The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. 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
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. getElementsByTagName() <html> <body> <p id=&quot;intro&quot;>W3Schools example</p> <div id=&quot;main&quot;> <p id=&quot;main1&quot;>The DOM is very useful</p> <p id=&quot;main2&quot;>This example demonstrates how to use the <b>getElementsByTagName</b> method</p> </div> <script type=&quot;text/javascript&quot;> x=document.getElementById(&quot;main&quot;).getElementsByTagName(&quot;p&quot;); document.write(&quot;First paragraph inside the main div: &quot; + x[0].childNodes[0].nodeValue); </script> </body> </html>
  • 22.
  • 23.
  • 24.
  • 25.
  • 26. Node Property Everything in a document can be considered a node, including the document itself. Properties Of Node Interface: • nodeName : Returns name of element. • nodeValue: Returns value of element. • nodeType :Returns type of node whether element or document etc. • parentNode: Contains the parent node (for nodes that can have parents). • childNodes: Contains a node list containing the children (for nodes that can have children). • firstChild : Contains the first child of this node.
  • 27.
  • 28.
  • 29. Node Property appendChild(newchild): Appends newChild as the last child of this node createTextNode = This property used to create new text node. e.g. createTextNode(a); createElement = This property usedt to create element e.g. createElement('tr');
  • 30. Node List The nodeList object represents a node and its child nodes as a node tree. Property of Nodelist: length: Returns an unsigned long integer indicating the number of nodes in the NodeList . Method of Nodelist: item(index): This method takes an index as its argument and returns the node at that index position.
  • 31. Properties of Document: doctype: Returns <!DOCTYPE information of document. implementation: Returns implementation node. documentElement: Returns root element of the document.
  • 32.