Document Object Model (DOM)

  • Revision slug: DOM
  • Revision title: Document Object Model (DOM)
  • Revision id: 373151
  • Created:
  • Creator: sanjay1992
  • Is current revision? No
  • Comment

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 the 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.
DOM event reference
Lists all the DOM events and their meanings.
History API: Manipulating 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.
Fullscreen API: Using the fullscreen mode
Describes how to set up a page that use the whole screen, without any browser UI around it.
Determining the dimensions of elements
How to figure out the right way to determine the dimensions of elements, given your needs.
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...

 

Revision Source

<div class="geckoVersionNote">
  <div class="callout-box">
    <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">Using the W3C DOM Level 1 Core</a></strong><br />
    Introduction to the W3C DOM.</div>
</div>
<div>
  <p><span class="seoSummary">The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML" title="en-US/docs/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-US/docs/JavaScript" title="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a>.</span></p>
</div>
<div class="cleared topicpage-table row">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the DOM</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Gecko_DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">Gecko DOM Reference</a></dt>
      <dd>
        The Gecko Document Object Model Reference.</dd>
      <dt>
        <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">About the Document Object Model</a></dt>
      <dd>
        A short introduction to the DOM.</dd>
      <dt>
        <a href="/en-US/docs/JavaScript_technologies_overview" title="en-US/docs/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-US/docs/DOM/Using_dynamic_styling_information" title="en-US/docs/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-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a></dt>
      <dd>
        Lists all the DOM events and their meanings.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: Manipulating 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-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/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-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/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-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: Using the fullscreen mode</a></dt>
      <dd>
        Describes how to set up a page that use the whole screen, without any browser UI around it.</dd>
      <dt>
        <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/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 href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/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="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p>
  </div>
  <div class="section">
    <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
    <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>
    <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2>
    <ul>
      <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li>
      <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/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="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
    <ul>
      <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li>
    </ul>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision