---
title: Document Object Model (DOM)
slug: Web/API/Document_Object_Model
tags:
  - DOM
  - NeedsTranslation
  - References
  - TopicStub
translation_of: Web/API/Document_Object_Model
translation_of_original: DOM
original_slug: DOM
---
<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> </p>