Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Introduction to the DOM
Similar to Introduction to the DOM (20)
Recently uploaded
Recently uploaded (20)
Introduction to the DOM
- 1. Document Object Model(DOM) Tharaa Abu Ashour tharaa_1993@yahoo.com
- 2. Outline: How Browser Works? What is the DOM? What is the Node? The DOM structure Model. Example of DOM How Can Access the Nodes? Adding Text Node to the Page Advantages and Disadvantages.
- 4. How Browser Works? Source code (plain text) will be parsed into DOM tree. With DOM tree will parse the content on the screen accordingly (css, javascript...) DOM tree is a data represented in tree structure. Source Code DOM Parser DOM Tree Render Engine Web Page
- 5. What is the DOM? Document Object Model is a platform and language neutral interface that allow program and script to dynamically access and update the content, structure and style of document. The DOM is an application programming interface (API) for HTML and XML documents. DOM is being developed by W3C, lets the programmer to access, modify HTML pages and XML docments.
- 6. What is the Node? •DOM is a tree of nodes of various types. •Nodes Text Node Attribute Node Element Node
- 7. The DOM Structure Model <html> <head> <title>Hello World!</title> </head> <body> <h1>Heading 1</h1> <p>Paragraph </p> <h2>Heading 2</h2> <p>Heading 1</p> </body> </html> HTML bodyhead title Hello World H1 P H2 P Heading 1 Heading 2Paragraph Paragraph DOM Tree Visualizer: https://gojs.net/latest/samples/DOMTree.html #document
- 8. Child, Sibling, Parent body H1 P H2 P #text #text #text #text Last child Firstchild Firstchild Firstchild Firstchild previousSibling NextSibling previousSibling NextSibling previousSibling NextSibling parentNode parentNode parentNode parentNode
- 9. Child, Sibling, Parent body H1 P H2 P #text #text #text #text So, How can access the text in Header2?! Firstchild nextSibling nextSibling Firstchild
- 10. How can access the nodes? By their name or Id (it will allow you to work with one element, and it's the easiest way) GetElementByName(NodeName) GetEllemtById(IdName) By Tag Name (GetElementsByTagName), it will return array of nodes By their relation to parent, child, sibling (nextSibling,previousSibling,parentNode,lastchild, firstchild, childNode) , childNode[0] == first child
- 11. Adding text Node to the Page Create New Node -var newNode = document.createElement("p"); Create Text Node -var textNode = document.createTextNode("hello world"); Link Text Node with New Node -NewNode.appendChild(textNod); Link Node to the DOM tree -Document.getElementById("id").appendChild(newNode)
- 12. Advantages and Disadvantages of DOM Advantages: Robust API for the DOM tree Easy to modify the data structure and extract data. Can be written with any language Disadvantages: Store the entire document in the memory. Based on DOM can written with any language, method naming convention don't follow standard java programming convension
- 13. Questions?
- 14. Thank You :)
Editor's Notes
- 1
- 2
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 14