Document Object Model (DOM)

  • Revision slug: DOM
  • Revision title: Document Object Model (DOM)
  • Revision id: 705
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 25 words added

Revision Content

Using the W3C DOM Level 1 Core
Introduction to the W3C DOM.

The Document Object Model (DOM) is an API for HTML and XML documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as JavaScript.

Documentation about DOM

Gecko DOM Reference
The Gecko Document Object Model Reference.
About the Document Object Model
A short introduction to the DOM.
The DOM and JavaScript
What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.
Using dynamic styling information
How to obtain information on and manipulate styling via the DOM
History API: Manipuling the browser history
Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.
File API: Using files from web applications
Describes the HTML5-introduced capability to select a local file and read data from it.
Using the Page Visibility API
Explains how to detect and use information about a web page being in the foreground or in the background.
Determining the dimensions of elements
How to figure out the right way to determine the dimensions of elements, given your needs.
The Document Object Model in Mozilla
An older set of documentation about the DOM, hosted at mozilla.org.
Dynamically modifying XUL-based user interface
The basics of manipulating the XUL UI with DOM methods.

View All...

Getting help from the community

You need help on a DOM-related problem and can't find the solution in the documentation?

  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

Tools easing working with the DOM

View All...

Related Topics

{{ languages( { "de": "de/DOM", "es": "es/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "it": "it/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }}

Revision Source

<div class="callout-box"><strong><a href="/en/Using_the_W3C_DOM_Level_1_Core" title="en/Using_the_W3C_DOM_Level_1_Core">Using the W3C DOM Level 1 Core</a></strong><br> Introduction to the W3C DOM.</div>
<div> <p>The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/en/HTML" title="en/HTML">HTML</a> and <a href="/en/XML" title="en/XML">XML</a> documents. It provides a structural representation of the document, enabling you to modify its content and visual presentation by using a scripting language such as <a href="/en/JavaScript" title="https://developer.mozilla.org/en/JavaScript">JavaScript</a>.</p>
</div>
<table class="topicpage-table"> <tbody> <tr> <td> <h3 name="Documentation" style="padding:12px 18px 8px 65px;min-height:48px;margin:-0px -0px 1em;background:transparent url('../media/img/icons-sections.png') 0 0px no-repeat;font:normal 28px/1 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;border-style:none;">Documentation about DOM</h3>
<dl> <dt><a href="/en/Gecko_DOM_Reference" title="en/Gecko_DOM_Reference">Gecko DOM Reference</a></dt> <dd>The Gecko Document Object Model Reference.</dd> <dt><a href="/en/DOM/About_the_Document_Object_Model" title="en/About_the_Document_Object_Model">About the Document Object Model</a></dt> <dd>A short introduction to the DOM.</dd> <dt><a href="/en/JavaScript_technologies_overview" title="en/The_DOM_and_JavaScript">The DOM and JavaScript</a></dt> <dd>What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.</dd> <dt><a href="/en/DOM/Using_dynamic_styling_information" title="en/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> <dd>How to obtain information on and manipulate styling via the DOM</dd> <dt><a href="/en/DOM/Manipulating_the_browser_history" title="en/DOM/Manipulating_the_browser_history">History API: Manipuling the browser history</a></dt> <dd>Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.</dd> <dt><a href="/en/Using_files_from_web_applications" title="https://developer.mozilla.org/en/Using_files_from_web_applications">File API: Using files from web applications</a></dt> <dd>Describes the HTML5-introduced capability to select a local file and read data from it.</dd> <dt><a href="/en/DOM/Using_the_Page_Visibility_API" title="en/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></dt> <dd>Explains how to detect and use information about a web page being in the foreground or in the background.</dd> <dt><a href="/en/Determining_the_dimensions_of_elements" title="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></dt> <dd>How to figure out the right way to determine the dimensions of elements, given your needs.</dd> <dt><a class="external" href="http://www.mozilla.org/docs/dom/">The Document Object Model in Mozilla</a></dt> <dd>An older set of documentation about the DOM, hosted at mozilla.org.</dd> <dt><a href="/en/Dynamically_modifying_XUL-based_user_interface" title="en/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> <dd>The basics of manipulating the XUL UI with DOM methods.</dd>
</dl>
<p><span class="alllinks"><a href="/Special:Tags?tag=DOM&amp;language=en" title="Special:Tags?tag=DOM&amp;language=en">View All...</a></span></p></td> <td> <h3 name="Community" style="padding:12px 18px 8px 65px;min-height:48px;margin:-0px -0px 1em;background:transparent url('../media/img/icons-sections.png') 0 -200px no-repeat;font:normal 28px/1 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;border-style:none;">Getting help from the community</h3>
<p>You need help on a DOM-related problem and can't find the solution in the documentation?</p>
<ul> <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li>
</ul>
<h3 name="Tools" style="padding:12px 18px 8px 65px;min-height:48px;margin:-0px -0px 1em;background:transparent url('../media/img/icons-sections.png') 0 -400px no-repeat;font:normal 28px/1 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;border-style:none;">Tools easing working with the DOM</h3>
<ul> <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> <li><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a></li> <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li>
</ul>
<p><span class="alllinks"><a href="/Special:Tags?tag=DOM:Tools&amp;language=en" title="Special:Tags?tag=DOM:Tools&amp;language=en">View All...</a></span></p><h3 name="Related_Topics" style="padding:12px 18px 8px 65px;min-height:48px;margin:-0px -0px 1em;background:transparent url('../media/img/icons-sections.png') 0 -600px no-repeat;font:normal 28px/1 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif;text-transform:uppercase;border-style:none;">Related Topics</h3>
<ul> <li><a href="/en/AJAX" title="en/AJAX">AJAX</a>, <a href="/en/CSS" title="en/CSS">CSS</a>, <a href="/en/DHTML" title="en/DHTML">DHTML</a>, <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a></li>
</ul></td> </tr> </tbody>
</table>
<p>{{ languages( { "de": "de/DOM", "es": "es/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "it": "it/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }}</p>
Revert to this revision