DOM
W3C Document Object Model
Objectives
Objectives
- Define "Document Object Model"
- Discuss why the DOM Constitutes an Interface
- Use getElementByID and querySelector to manipulate an HTML Document
- Distinguish between the various types of content found in an HTML document
Interfaces
Not UI!
Interfaces
A Contract for Objects
Interfaces
- Dictates Behavior (Functions)
- Specifies Content (Properties)
DOM Interfaces
- Element
- Node
- Event
- EventTarget
- EventListener
Content Categories
- Metadata
- Flow
- Sectioning
- Heading
- Phrasing
- Embedded
- Interactive
- Palpable
- Transparent
Metadata Content
- <meta>
- <title>
- <link>
- <base>
- <script>
- <style>
- <noscript>
Flow Content
Contain text or embedded content
- <a>
- <p>
- <article>
- <dfn>
- <details>
- <section>
- and many, many more
Sectioning Content
Create a section in the current outline
- <article>
- <aside>
- <nav>
- <section>
Heading Content
Defines the title of the current section
- <h1>
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
- <hgroup>
Phrasing Content
Defines text and the markup it contains
- <b>
- <strong>
- <small>
- <meter>
- <samp>
- <svg>
- and many more
Replaced Element
External objects whose representation is not dependent on styling/CSS
Replaced Element
- object
- img
- video
- input
- canvas
- audio