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

1

The Document Object Model (DOM)

How a browser internally represents an HTML document Jay Urbain, Ph.D.

The Document Object Model (DOM) represents the objects that comprise a web page document

2

The hierarchical structure of the DOM depends on the current web page content

3

Looking closer at an Element object: Text and Attribute descendents

p em Element Here is an Text word emphasized Attribute id=“black” id=“blue” <p id=“blue”> Here is an<em id=“black”>emphasized</em> word</p> Here is an emphasized word

4

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 accessed, added, deleted, or modified

p em Here is an word emphasized id=“black” id=“blue” Element node Text node Attribute node

5

All nodes have relationships to each other

• Every node has a parent

except for the document (root) node

• Most elements have

descendant nodes

p em Here is an word emphasized id=“black” id=“blue” Element node Text node Attribute node document html title body My page head

References

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