The Document Object Model (DOM) How a browser internally represents - PowerPoint PPT Presentation

The Document Object Model (DOM) How a browser internally represents an HTML document Jay Urbain, Ph.D. 1

The Document Object Model (DOM) represents the objects that comprise a web page document The hierarchical structure of the DOM depends on the current web page content 2

Looking closer at an Element object: Text and Attribute descendents <p id=“blue”> Here is an<em id=“black”>emphasized</em> word</p> Here is an emphasized word p Element em Here is an word Text id=“blue” Attribute id=“black” emphasized 3

Each Element, Attribute, or Text fragment in an HTML document is represented by a corresponding object in the DOM hierarchy • The DOM objects are programmatically accessible via Javascript – These objects are called nodes – Nodes can be dynamically Element node accessed, added, deleted, or modified Text node p Attribute node em Here is an word id=“blue” id=“black” emphasized 4

All nodes have relationships to each other document • Every node has a parent html except for the document (root) node head • Most elements have body descendant nodes title p My page Element node em Here is an word id=“blue” Text node id=“black” emphasized Attribute node 5

References http://www.w3.org/standards • http://en.wikipedia.org/wiki/HTML • • HTML and CSS for Beginners with HTML5, Mark Lassoff