Preface

  • Revision slug: Gecko_DOM_Reference/Preface
  • Revision title: Preface
  • Revision id: 304855
  • Created:
  • Creator: claudepache
  • Is current revision? No
  • Comment attempt to correct strange encoding errors

Revision Content

{{ DomRef() }}

About This Reference

This section describes the guide itself: whom it's for, how the information is presented, and how you can use the examples in the reference in your own DOM development.

Note that this document is under development, and is not currently a comprehensive listing of the DOM methods and properties implemented for Gecko but each individual section of the document (e.g., the DOM Document Reference) is complete for the object(s) it describes. As reference information for the various members of the huge APIs becomes available, it is integrated into this document here.

Who Should Read This Guide

The reader of the Gecko DOM Reference is a web developer or savvy web user who knows something about how web pages are constructed. This reference avoids making presumptions about the reader's acquaintance with the DOM, with XML, with web servers or web standards, and even with JavaScript, the language in which the DOM is made accessible to the reader. But the document does presume familiarity with HTML, with markup, with the basic structure of web pages, with web browsers, and with stylesheets.

Here introductory material is presented, with many examples, and high-level explanations should be valuable for inexperienced and experienced web developers alike, and it is a not only "beginners" web development guide. In general, however, it is an evolving API reference manual.

What is Gecko?

Mozilla, Firefox, Netscape 6+, and other Mozilla-based browsers have identical implementations of the DOM. This is so because they use the same technology. naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

Gecko, the software component in these browsers that handles the parsing of the HTML, the layout of the pages, the document object model, and even the rendering of the entire application interface, is a fast, standards-compliant rendering engine that implements the W3C DOM standards and the DOM-like (but not standardized) browser object model (i.e., window et al) in the context of web pages and the application interface, or chrome, of the browser.

Though the application interface and the content displayed by the browser are different in many practical ways, the DOM exposes them uniformly as a hierarchy of nodes. (commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

API Syntax

Each description in the API reference includes the syntax, the input and output parameters (where the return type is given), an example, any additional notes, and a link to the appropriate specification.

Read-only properties may only be accessed. Since setting them is not possible, they typically have a single line of syntax. For example, the read-only property availHeight of the screen object includes the following syntax information:

iAvail = window.screen.availHeight

This means that you can only use the property on the right hand side of the statement.

Read/write properties, however, can have properties accessed or set:

msg = window.status
window.status = msg

In general, the object whose member is being described is given in the syntax statement with a simple type, e.g, element for all elements, document for the top-level document object, table for the TABLE object, etc. (see Important Data Types for more information about data types).

Using the Examples

Many of the examples in this reference are complete files which you can execute by cutting and pasting them into a new file, which you can then open in your web browser.

Others are snippets. You can run them later by placing them within JavaScript callback functions.

For instance, this window.document property example can be tested within a function. Here, it is called by a button's onclick attribute:

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function testWinDoc() {
 
  var doc= window.document;
 
  alert(doc.title);
 
}
</script>
</head>

<body>
  <button onclick="testWinDoc();">test document property</button>
</body>
</html>

Similar functions and pages can be devised for all the object members that are not already packaged up for use. See the Testing the DOM API section in the introduction for a "test harness" that you can use to test a number of APIs all at once.

{{ languages( { "es": "es/Referencia_DOM_de_Gecko/Prefacio", "fr": "fr/Référence_du_DOM_Gecko/Préface", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_参考/Preface", "pt": "pt/Referência_do_DOM_Gecko" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="About_This_Reference" name="About_This_Reference">About This Reference</h3>
<p>This section describes the guide itself: whom it's for, how the information is presented, and how you can use the examples in the reference in your own DOM development.</p>
<p>Note that this document is under development, and is not currently a comprehensive listing of the DOM methods and properties implemented for Gecko but each individual section of the document (e.g., the <a href="/en/DOM/document" title="en/DOM/document">DOM Document Reference</a>) is complete for the object(s) it describes. As reference information for the various members of the huge APIs becomes available, it is integrated into this document here.</p>
<h3 id="Who_Should_Read_This_Guide" name="Who_Should_Read_This_Guide">Who Should Read This Guide</h3>
<p>The reader of the <a href="/en/Gecko_DOM_Reference" title="en/Gecko_DOM_Reference">Gecko DOM Reference</a> is a web developer or savvy web user who knows something about how web pages are constructed. This reference avoids making presumptions about the reader's acquaintance with the DOM, with <a href="/en/XML" title="en/XML">XML</a>, with web servers or web standards, and even with <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, the language in which the DOM is made accessible to the reader. But the document does presume familiarity with <a href="/en/HTML" title="en/HTML">HTML</a>, with markup, with the basic structure of web pages, with web browsers, and with stylesheets.</p>
<p>Here introductory material is presented, with many examples, and high-level explanations should be valuable for inexperienced and experienced web developers alike, and it is a not only "beginners" web development guide. In general, however, it is an evolving API reference manual.</p>
<h3 id="What_is_Gecko.3F" name="What_is_Gecko.3F">What is Gecko?</h3>
<p>Mozilla, Firefox, Netscape 6+, and other Mozilla-based browsers have identical implementations of the DOM. This is so because they use the same technology. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p>
<p>Gecko, the software component in these browsers that handles the parsing of the HTML, the layout of the pages, the document object model, and even the rendering of the entire application interface, is a fast, standards-compliant rendering engine that implements the W3C DOM standards and the DOM-like (but not standardized) browser object model (i.e., <a href="/en/DOM/window" title="en/DOM/window"><code>window</code></a> et al) in the context of web pages and the application interface, or <em>chrome</em>, of the browser.</p>
<p>Though the application interface and the content displayed by the browser are different in many practical ways, the DOM exposes them uniformly as a hierarchy of nodes. <span class="comment">(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user</span></p>
<h3 id="API_Syntax" name="API_Syntax">API Syntax</h3>
<p>Each description in the API reference includes the syntax, the input and output parameters (where the return type is given), an example, any additional notes, and a link to the appropriate specification.</p>
<p>Read-only properties may only be accessed. Since setting them is not possible, they typically have a single line of syntax. For example, the read-only property <code>availHeight</code> of the <code>screen</code> object includes the following syntax information:</p>
<pre>iAvail = window.screen.availHeight
</pre>
<p>This means that you can only use the property on the right hand side of the statement.</p>
<p>Read/write properties, however, can have properties accessed or set:</p>
<pre>msg = window.status
window.status = msg
</pre>
<p>In general, the object whose member is being described is given in the syntax statement with a simple type, e.g, <code>element</code> for all elements, <code>document</code> for the top-level document object, table for the <code>TABLE</code> object, etc. (see <a href="/en/Gecko_DOM_Reference/Introduction#Important_Data_Types" title="en/Gecko_DOM_Reference/Introduction#Important_Data_Types">Important Data Types</a> for more information about data types).</p>
<h3 id="Using_the_Examples" name="Using_the_Examples">Using the Examples</h3>
<p>Many of the examples in this reference are complete files which you can execute by cutting and pasting them into a new file, which you can then open in your web browser.</p>
<p>Others are snippets. You can run them later by placing them within JavaScript callback functions.</p>
<p>For instance, this <a href="/en/DOM/window.document" title="en/DOM/window.document">window.document</a> property example can be tested within a function. Here, it is called by a button's <code>onclick </code>attribute:</p>
<pre class="brush: html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Test Page&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function testWinDoc() {
 
  var doc= window.document;
 
  alert(doc.title);
 
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;button onclick="testWinDoc();"&gt;test document property&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Similar functions and pages can be devised for all the object members that are not already packaged up for use. See the <a href="/en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" title="en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">Testing the DOM API</a> section in the introduction for a "test harness" that you can use to test a number of APIs all at once.</p>
<p>{{ languages( { "es": "es/Referencia_DOM_de_Gecko/Prefacio", "fr": "fr/Référence_du_DOM_Gecko/Préface", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_参考/Preface", "pt": "pt/Referência_do_DOM_Gecko" } ) }}</p>
Revert to this revision