Downloaded 11 times
![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.](https://image.slidesharecdn.com/domstructure-150101014427-conversion-gate02/75/Dom-structure-15-2048.jpg)
Dom structure
This document discusses the Document Object Model (DOM). It explains that the DOM defines the logical structure of documents and allows programs and scripts to access and update the content and structure of documents. It describes the different parts of the W3C DOM standard including the Core DOM, XML DOM, and HTML DOM. It also provides examples of how DOM components like elements, attributes, and text nodes are organized in a tree structure and can be accessed and manipulated using the HTML DOM.
More Related Content
Similar to Dom structure
![Internet and Web Technology (CLASS-5) [HTML DOM]](https://cdn.slidesharecdn.com/ss_thumbnails/iwtclass-5-200714183135-thumbnail.jpg?width=640&height=640&fit=bounds)
More from baabtra.com - No. 1 supplier of quality freshers
Dom structure
- 2. Disclaimer: This presentationis 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. The Document ObjectModel (DOM) The DOM is a W3C (World Wide Web Consortium) standard It defines the logical structure of documents and the way a document is accessed and manipulated platform and language-neutral interface
- 5. The W3C DOMstandard is separated into 3 different parts: Core DOM ◦ standard model for all document types XML DOM ◦ standard model for XML documents HTML DOM ◦ standard model for HTML documents
- 6. The HTML DOMis a standard object model and programming interface for HTML. It defines: The HTML elements as objects The properties of all HTML elements The methods to access all HTML elements The events for all HTML elements
- 7. DOM components areaccessible as objects or collections of objects. In HTML DOM The entire document is a document node Every HTML element is an element node The Every HTML attribute is an attribute node text inside HTML elements are text nodes Comments are comment nodes
- 8. DOM components forma tree of nodes called Node Tree nodes in the node tree have a hierarchical relationship to each other When a web page is loaded, the browser creates a Document Object Model of the page.
- 10.
- 11. All HTML elementsare defined as objects. methods and object properties. ◦ A method is an action you can do. ◦ A property is a value that you can get or set.
- 12. getElementById(id) get thenode (element) with a specified id appendChild(node) Insert a new child node(element) removeChild(node) Remove a child node(element) innerHTML The text value of a node(element) parentNode The parent node of a node(element) ChildNode The child nodes of a node(element) attributes The attribute nodes of a node(element) HTML DOM PROPERTIES HTML DOM Methods
- 13. Accessing Node byid Accessing Node by tag Accessing Node by name
- 14. Access to elementsby their id document.getElementById(<id>) returns the element with id <id> id attribute can be defined in each start tag.
- 15. there are typicallyseveral elements with the same tag document.getElementsByTagName(<tag>) – e.g. • var li =document.getElementsByTagName(“li")[0]; //to get first li of ul.
- 16. several elements canhave the same name document.getElementsByName(<name>) returns the collection of elements with name <name>
- 17. <html> <body> <p id="demo">Click thebutton to replace this document with new content.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.open("text/html","replace"); document.write("<h2>Learning about the HTML DOM is fun!</h2>"); document.close(); } </script> </body> </html>
- 19. Want to learnmore 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.
- 20. 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
- 21. 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 Cafit Square, Hilite Business Park, Near Pantheerankavu, Kozhikode Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com