SlideShare une entreprise Scribd logo
1  sur  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]

Contenu connexe

Tendances

Tendances (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
 

Similaire à 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
 

Dernier

Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
[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
 
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
 
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
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
🐬 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
 
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: 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
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfhans926745
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
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
 

Dernier (20)

Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
[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
 
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...
 
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
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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: 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...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
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
 

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.