The Document Object Model How a browser internally
The Document Object Model How a browser internally represents an HTML document SE-2840 Dr. Mark L. Hornick 1
Recall: window is the top-level object in the BOM hierarchy Note: The Document Object Model (DOM) is a child/subset of the BOM SE-2840 Dr. Mark L. Hornick 2
The Document Object Model (DOM) represents the objects that comprise a web page document What SE 2811 pattern Does this remind you of? The hierarchical structure of the DOM below the <body> element depends on the current web page content SE-2840 Dr. Mark L. Hornick 3
All nodes have relationships to each other document l l Every node has a parent except for the document node Most elements have descendant nodes html head body title Element node p My title Here is an em word Text node Attribute node emphasized SE-2840 Dr. Mark L. Hornick id=“par 1” id=“em 1” 4
Looking closer at an Element object within the <body>: Text and Attribute descendents <p id=“par 1”> Here is an<em id=“em 1”>emphasized</em> word</p> Here is an emphasized word p Element Here is an em emphasized word id=“par 1” Text Attribute id=“em 1” SE-2840 Dr. Mark L. Hornick 5
Each Element, Attribute, or Text fragment in an HTML document is represented by a corresponding object in the DOM hierarchy l The DOM objects are programmatically accessible via Javascript Element node l These objects are called nodes l Nodes can be dynamically accessed, added, deleted, or modified Here is an Note: There is also a Comment node. Text node p em emphasized SE-2840 Dr. Mark L. Hornick Attribute node word id=“par 1” id=“em 1” 6
- Slides: 6