Using the W3C DOM Level 1 Core

  • Revision slug: Using_the_W3C_DOM_Level_1_Core
  • Revision title: Using the W3C DOM Level 1 Core
  • Revision id: 96635
  • Created:
  • Creator: NickolayBot
  • Is current revision? No
  • Comment Robot: Changing category DOM:Articles

Revision Content

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in Mozilla (on which Netscape 6 is based) and (mostly) in MSIE 5.0 for Windows. It is a powerful base for future scripting on the web.

What is a content tree?

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

When Mozilla parses in a document, it builds a content tree and then uses it to display the document.

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

What does the DOM Level 1 Core let me do?

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

A simple example

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job (with syntax highlighting showing Javascript reserved words, predefined DOM properties and methods, and Javascript comments):

// document.getElementsByTagName("H1") returns a NodeList of the H1
// elements in the document, and the first is number 0:
var header = document.getElementsByTagName("H1").item(0);

// the firstChild of the header is a Text node, and the data
// property of the text node contains its text:
header.firstChild.data = "A dynamic document";
// now the header is "A dynamic document".

// Get the first P element in the document the same way:
var para = document.getElementsByTagName("P").item(0);
// and change its text too:
para.firstChild.data = "This is the first paragraph.";

// create a new Text node for the second paragraph
var newText = document.createTextNode("This is the second paragraph.");
// create a new Element to be the second paragraph
var newElement = document.createElement("P");
// put the text in the paragraph
newElement.appendChild(newText);
// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)
para.parentNode.appendChild(newElement);

You can see this script as a complete example.

How can I learn more?

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

{{wiki.template('Block-title', [ "Original Document Information" ])}}

  • Author(s): L. David Baron <dbaron at dbaron dot org>
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license

Revision Source

<p>
</p><p>The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in Mozilla (on which Netscape 6 is based) and (mostly) in MSIE 5.0 for Windows. It is a powerful base for future scripting on the web.
</p>
<h3 name="What_is_a_content_tree.3F"> What is a content tree? </h3>
<p>Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on <a href="en/The_DOM_and_JavaScript">whitespace in the DOM</a>): 
</p>
<pre class="eval">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;My Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Header&lt;/h1&gt;
  &lt;p&gt;Paragraph&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" src="File:en/Media_Gallery/Using_the_W3C_DOM_Level_1_Core-doctree.jpg">
</p><p>When Mozilla parses in a document, it builds a content tree and then uses it to display the document.
</p><p>The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.) 
</p>
<h3 name="What_does_the_DOM_Level_1_Core_let_me_do.3F"> What does the DOM Level 1 Core let me do? </h3>
<p>The W3C DOM Level 1 allows you to change the content tree <i>any way you want</i>. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the <code>document</code> property of the global object. This <code>document</code> object implements the  <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> from the W3C's DOM Level 1 spec. 
</p>
<h3 name="A_simple_example"> A simple example </h3>
<p>Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job (with syntax highlighting showing <code><span class="highlightred">Javascript reserved words</span></code>, predefined <code><span class="highlightblue">DOM properties and methods</span></code>, and <code><span class="highlightgreen">Javascript comments</span></code>): 
</p>
<pre class="eval"><span class="highlightgreen">// document.getElementsByTagName("H1") returns a NodeList of the H1
// elements in the document, and the first is number 0:</span>
<span class="highlightred">var</span> header = <span class="highlightblue">document.getElementsByTagName</span>("H1").<span class="highlightblue">item</span>(0);

<span class="highlightgreen">// the firstChild of the header is a Text node, and the data</span>
// property of the text node contains its text:
header.<span class="highlightblue">firstChild.data</span> = "A dynamic document";
<span class="highlightgreen">// now the header is "A dynamic document".</span>

<span class="highlightgreen">// Get the first P element in the document the same way:</span>
<span class="highlightred">var</span> para = <span class="highlightblue">document.getElementsByTagName</span>("P").<span class="highlightblue">item</span>(0);
<span class="highlightgreen">// and change its text too:</span>
para.<span class="highlightblue">firstChild.data = "This is the first paragraph.";</span>

<span class="highlightgreen">// create a new Text node for the second paragraph</span>
<span class="highlightred">var</span> newText = <span class="highlightblue">document.createTextNode</span>("This is the second paragraph.");
<span class="highlightgreen">// create a new Element to be the second paragraph</span>
<span class="highlightred">var</span> newElement = <span class="highlightblue">document.createElement</span>("P");
<span class="highlightgreen">// put the text in the paragraph</span>
newElement.<span class="highlightblue">appendChild</span>(newText);
<span class="highlightgreen">// and put the paragraph on the end of the document by appending it to
// the BODY (which is the parent of para)</span>
para.<span class="highlightblue">parentNode.appendChild</span>(newElement);
</pre>
<p>You can see this script as <a class="external" href="http://www.mozilla.org/docs/dom/technote/intro/example.html">a complete example</a>.
</p>
<h3 name="How_can_I_learn_more.3F"> How can I learn more? </h3>
<p>Now that you are familiar with the basic concepts of the DOM, there is a document explaining the <a href="en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a>. It is the follow-up to this document.
</p><p>See also the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our <a href="en/DOM">other DOM documentation</a>.
</p>
<div class="originaldocinfo">
<p>{{wiki.template('Block-title', [ "Original Document Information" ])}}
</p>
<ul><li> Author(s): L. David Baron &lt;dbaron at dbaron dot org&gt;
</li><li> Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a> </li></ul></div>

Revert to this revision