DOM a JavaScript

  • Revision slug: DOM_a_JavaScript
  • Revision title: DOM a JavaScript
  • Revision id: 123837
  • Created:
  • Creator: Pawell
  • Is current revision? Ne
  • Comment vlozeno

Revision Content

{{ PotřebujePřeložit() }}

The Big Picture

Visual effects like moving layers around the page, showing and hiding layers, popup menus, etc, are often referred to as "DHTML", or "Dynamic HTML". Some people question the real use of these technologies in web pages that are supposed to deal content and not presentation. But the fact is it is there, today.

Since I work on this project, and have contacts with a lot of webmasters, it struck me that a large part of the web-designing community doesn't know how their DHTML works. Most of the time they went to a scripts repository site, and just copy-pasted the code in their own web page. Unfortunately most of these sites talk about "javascript" and "DHTML" and never about the "DOM". It is true that, even though the DOM is an old concept, it became part of the "average web designer jargon" only quite recently.

It is a big challenge for a project like Mozilla to convince the owners of those sites that it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. Netscape 6 has been much criticized by clueless web designers who were writing their "JavaScript" for Netscape 4 and Internet Explorer using document.layers and document.all. Everyday we try to help people in the newsgroups, in personal emails, in Bugzilla, to get their site as compliant as possible. One of the biggest problem we encounter is the confusion between JavaScript, DHTML, and the DOM. This is an attempt to clear things up, and to explain the relations between these fancy and useful technologies.

JavaScript, THE Web Scripting Language

JavaScript is an "object scripting language" first developed at Netscape Communications Corp. by Brendan Eich, who is one of the leaders of the Mozilla project today. The JavaScript engine used by Mozilla is SpiderMonkey, which adheres to the ECMA-262 revision 3 specification. JavaScript is also known as ECMAScript (but see the linked page for detailed explanation).

Contrary to popular misconception, JavaScript is not "Interpretive Java". In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. The great thing about JavaScript is that it is extremely easy to learn if you want to do basic programming (like the one required for simple DHTML). No visible variable types, strings so easy to use, total platform neutrality, etc. For advanced coders it also functions as both an object-oriented and a procedural language.

You will find that most of this paragraph about JavaScript has been taken from the Mozilla JavaScript page. The most recent ECMA specification can be found here.

The Document Object Model, a language-neutral set of interfaces

While JavaScript is the programming language which will allow you to operate on the DOM objects and to manipulate them programmatically, the DOM will provide you with methods and properties to retrieve, modify, update, and delete parts of the document you are working on. For example, you may retrieve the value of an HTML textfield as a string using the DOM. You could then use the JavaScript "+" operator to concatenate that string with another one in order to make a meaningful sentence. You would then use the DOM "alert()" method to display the string in a dialog to the user. See also the examples below.

If a webpage were a piece of imported Swedish furniture, the DOM would be the illustrations of the parts - the shelves, bolts, allen wrenches and screwdrivers. It's possible to write instructions on how to put the parts together and use the parts in any number of languages, but you'll only use the ones written in the one you understand. The manual makes it easy to put the furniture together by using written instructions (JavaScript) to reference illustrations of objects (DOM) which represent actual objects (browser's rendering engine). (Thanks to Jonathan for the analogy!)

What's this "language-neutral" hype with the DOM? Why is the DOM language-neutral if the only language ever used to access it is JavaScript? Well, that is not quite correct. For example, Mozilla uses the DOM internally both in C++ and JavaScript for its user interface. The editor, for instance, uses the DOM extensively in order to insert, modify, and delete the HTML that you are seeing when you compose a page in the Composer module. Other known implementations of the DOM include Perl, Java, ActiveX, Python, and probably others. This is of course only possible thanks to the language-neutrality of the DOM.

The DOM and JavaScript - What is doing what?

We arrive at the main point of this paper: What is doing what? In a script I embedded into my web page, what is the DOM, and what is the JavaScript? Let us look closer at a simple example. It will retrieve all the <a> tags in a NodeList that we called "anchorTags". Then for each anchor tag (each element of the anchorTags NodeList), it will alert with the value of the "href" attribute of the tag.

Blue is for JavaScript, Red is for DOM.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
}

Explanations

This code snippet shows what is core JavaScript, and what is DOM.

var anchorTags =
This will create a JavaScript variable called "anchorTags".
document.getElementsByTagName("a")
The Document interface is the first interface defined in the DOM1 Core, and document is a host object implementing the Document interface. The document holds everything that is in your page.
The DOM1 Core defines the getElementsByTagName() method on the Document interface. It retrieves in a NodeList (a sort of DOM-specific array that holds nodes) of all the tags that match the parameter passed to the function, in order of appearance in the document source. The anchorTags variable is thus now a NodeList.
;
The basic end-of-instruction semicolon. JavaScript stuff.
for (var i = 0; i <
Typical "for" loop in a programming language. This will allow us to go through each node contained in the anchorTags NodeList. Note the declaration of the variable "i". Also JavaScript.
anchorTags.length
The DOM1 Core defines the length property of the NodeList interface. It returns an integer which is the number of nodes contained in the NodeList. Note that JavaScript arrays also have a {{ mediawiki.interwiki('en', 'Core_JavaScript_1.5_Reference:Global_Objects:Array:length', 'length property') }}.
; i++) {
Typical JavaScript variable by-1-increment.
alert(
alert() is a DOM method that pops up a dialog with the parameter (string) you passed to it. Note, that it's a part of what's called DOM level 0, or DOM0. DOM0 is a set of interfaces supported by some browsers, but which are not a part of any DOM specification.
"Href of this a element is : " +
A string literal and a string concatenation operator. JavaScript.
anchorTags{{ mediawiki.external('i') }}.href
"href" is a property of the HTMLAnchorElement interface defined in the DOM1 HTML spec. It returns the value of href attribute of the anchor element, if any.
We also use anchorTags{{ mediawiki.external('i') }}, the same syntax that's used in JavaScript to access i-th item of an array. The language-neutral "DOM way" to access an item of a NodeList is to use the item() method, defined on the NodeList interface: anchorTags.item(1).href. But most JavaScript implementations allow you use the simpler array-like syntax, and that's what most people actually use.
+ "\n");
More string concatenation. Insert an carriage return at the end of the string.
}
End of "for" loop.

{{ InfoDokumentu("Fabian Guisset <fguisset at="" dot="" net="" softhome="">", "", "", "© 1998-2005 Různí přispěvatelé mozilla.org pod licencí Creative Commons") }}</fguisset>

{{ languages( { "en": "en/Le_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}

Revision Source

<p>
{{ PotřebujePřeložit() }}
</p>
<h3 name="The_Big_Picture"> The Big Picture </h3>
<p>Visual effects like moving layers around the page, showing and hiding layers, popup menus, etc, are often referred to as "<a href="cs/DHTML">DHTML</a>", or "Dynamic HTML". Some people question the real use of these technologies in web pages that are supposed to deal content and not presentation. But the fact is it is there, today.
</p><p>Since I work on this project, and have contacts with a lot of webmasters, it struck me that a large part of the web-designing community doesn't know how their DHTML works. Most of the time they went to a scripts repository site, and just copy-pasted the code in their own web page. Unfortunately most of these sites talk about "javascript" and "DHTML" and never about the "<a href="cs/DOM">DOM</a>". It is true that, even though the DOM is an old concept, it became part of the "average web designer jargon" only quite recently.
</p><p>It is a big challenge for a project like Mozilla to convince the owners of those sites that it is worth coding for the W3C DOM, which sometimes means a lot of work, and drops support for the older browsers. It is also a big challenge to get the facts straight concerning the support for the W3C DOM. Netscape 6 has been much criticized by clueless web designers who were writing their "JavaScript" for Netscape 4 and Internet Explorer using document.layers and document.all. Everyday we try to help people in the newsgroups, in personal emails, in Bugzilla, to get their site as compliant as possible. One of the biggest problem we encounter is the confusion between <a href="cs/JavaScript">JavaScript</a>, <a href="cs/DHTML">DHTML</a>, and the <a href="cs/DOM">DOM</a>. This is an attempt to clear things up, and to explain the relations between these fancy and useful technologies.
</p>
<h3 name="JavaScript.2C_THE_Web_Scripting_Language"> JavaScript, THE Web Scripting Language </h3>
<p><a href="cs/JavaScript">JavaScript</a> is an "object scripting language" first developed at Netscape Communications Corp. by Brendan Eich, who is one of the leaders of the Mozilla project today. The JavaScript engine used by Mozilla is <a href="cs/SpiderMonkey">SpiderMonkey</a>, which adheres to the ECMA-262 revision 3 specification. JavaScript is also known as <a href="cs/ECMAScript">ECMAScript</a> (but see the linked page for detailed explanation).
</p><p>Contrary to popular misconception, JavaScript is not "Interpretive Java". In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. The great thing about JavaScript is that it is extremely easy to learn if you want to do basic programming (like the one required for simple DHTML). No visible variable types, strings so easy to use, total platform neutrality, etc. For advanced coders it also functions as both an object-oriented and a procedural language.
</p><p>You will find that most of this paragraph about JavaScript has been taken from the <a class="external" href="http://mozilla.org/js">Mozilla JavaScript page</a>. The most recent ECMA specification can be found <a class="external" href="http://www.mozilla.org/js/language/">here</a>.
</p>
<h3 name="The_Document_Object_Model.2C_a_language-neutral_set_of_interfaces"> The Document Object Model, a language-neutral set of interfaces </h3>
<p>While JavaScript is the programming language which will allow you to operate on the DOM objects and to manipulate them programmatically, the DOM will provide you with methods and properties to retrieve, modify, update, and delete parts of the document you are working on. For example, you may retrieve the value of an HTML textfield as a string using the DOM. You could then use the JavaScript "+" operator to concatenate that string with another one in order to make a meaningful sentence. You would then use the DOM "alert()" method to display the string in a dialog to the user. See also the examples below.
</p><p>If a webpage were a piece of imported Swedish furniture, the DOM would be the illustrations of the parts - the shelves, bolts, allen wrenches and screwdrivers. It's possible to write instructions on how to put the parts together and use the parts in any number of languages, but you'll only use the ones written in the one you understand. The manual makes it easy to put the furniture together by using written instructions (JavaScript) to reference illustrations of objects (DOM) which represent actual objects (browser's rendering engine). (Thanks to Jonathan for the analogy!)
</p><p>What's this "language-neutral" hype with the DOM? Why is the DOM language-neutral if the only language ever used to access it is JavaScript? Well, that is not quite correct. For example, Mozilla uses the DOM internally both in C++ and JavaScript for its user interface. The editor, for instance, uses the DOM extensively in order to insert, modify, and delete the HTML that you are seeing when you compose a page in the Composer module. Other known implementations of the DOM include <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>, and probably others. This is of course only possible thanks to the language-neutrality of the DOM.
</p>
<h3 name="The_DOM_and_JavaScript_-_What_is_doing_what.3F"> The DOM and JavaScript - What is doing what? </h3>
<p>We arrive at the main point of this paper: What is doing what? In a script I embedded into my web page, what is the DOM, and what is the JavaScript?
Let us look closer at a simple example.
It will retrieve all the <span class="nowiki">&lt;a&gt;</span> tags in a NodeList that we called "<code>anchorTags</code>". Then for each anchor tag (each element of the <code>anchorTags</code> NodeList), it will alert with the value of the "href" attribute of the tag.
</p><p>Blue is for JavaScript, Red is for DOM.
</p>
<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
{
   <span class="highlightred">alert</span>("Href of " + i + "-th element is : " + <span class="highlightred">anchorTags[i].href</span> + "\n");
}</span>
</pre>
<h4 name="Explanations"> Explanations </h4>
<p>This code snippet shows what is core JavaScript, and what is DOM.
</p>
<dl><dt> <span class="highlightblue">var anchorTags =</span>
</dt><dd> This will create a JavaScript variable called "<code>anchorTags</code>".
</dd><dt> <span class="highlightred">document.getElementsByTagName("a")</span>
</dt><dd> The <code>Document</code> interface is the first interface defined in the DOM1 Core, and <code>document</code> is a host object implementing the <code>Document</code> interface. The document holds everything that is in your page.<br>The DOM1 Core defines the <code>getElementsByTagName()</code> method on the <code>Document</code> interface. It retrieves in a NodeList (a sort of DOM-specific array that holds nodes) of all the tags that match the parameter passed to the function, in order of appearance in the document source. The <code>anchorTags</code> variable is thus now a NodeList.
</dd><dt> <span class="highlightblue">;</span>
</dt><dd> The basic end-of-instruction semicolon. JavaScript stuff.
</dd><dt> <span class="highlightblue">for (var i = 0; i &lt;</span>
</dt><dd> Typical "for" loop in a programming language. This will allow us to go through each node contained in the <code>anchorTags</code> NodeList. Note the declaration of the variable "<code>i</code>". Also JavaScript.
</dd><dt> <span class="highlightred">anchorTags.length</span>
</dt><dd> The DOM1 Core defines the <code>length</code> property of the <code>NodeList</code> interface. It returns an integer which is the number of nodes contained in the NodeList. Note that JavaScript arrays also have a {{ mediawiki.interwiki('en', 'Core_JavaScript_1.5_Reference:Global_Objects:Array:length', 'length property') }}.
</dd><dt> <span class="highlightblue">; i++) {</span>
</dt><dd> Typical JavaScript variable by-1-increment.
</dd><dt> <span class="highlightred">alert(</span>
</dt><dd> <code>alert()</code> is a DOM method that pops up a dialog with the parameter (string) you passed to it. Note, that it's a part of what's called DOM level 0, or DOM0. DOM0 is a set of interfaces supported by some browsers, but which are not a part of any DOM specification.
</dd><dt> <span class="highlightblue">"Href of this a element is : " +</span>
</dt><dd> A string literal and a string concatenation operator. JavaScript.
</dd><dt> <span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span>
</dt><dd> "<code>href</code>" is a property of the <code>HTMLAnchorElement</code> interface defined in the DOM1 HTML spec. It returns the value of <code>href</code> attribute of the anchor element, if any.<br>We also use <code>anchorTags{{ mediawiki.external('i') }}</code>, the same syntax that's used in JavaScript to access <code>i</code>-th item of an array. The language-neutral "DOM way" to access an item of a NodeList is to use the <code>item()</code> method, defined on the <code>NodeList</code> interface: <code>anchorTags.item(1).href</code>. But most JavaScript implementations allow you use the simpler array-like syntax, and that's what most people actually use.
</dd><dt> <span class="highlightblue">+ "\n");</span>
</dt><dd> More string concatenation. Insert an carriage return at the end of the string.
</dd><dt> <span class="highlightblue">}</span>
</dt><dd> End of "for" loop.
</dd></dl>
<p>{{ InfoDokumentu("Fabian Guisset <fguisset at="" dot="" net="" softhome="">", "", "", "© 1998-2005 Různí přispěvatelé mozilla.org pod licencí <a class='\"external\"' href='\"http://www.mozilla.org/foundation/licensing/website-content.html\"'>Creative Commons</a>") }}</fguisset>
</p>{{ languages( { "en": "en/Le_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}
Revert to this revision