DOM Level 2 - Example

JavaScript Tutorials - Herong's Tutorial Examples - Version 2.21, by Dr. Herong Yang

JavaScript Tutorials - Herong's Tutorial Examples

∟W3C's Document Object Model (DOM) Specifications

∟DOM Level 2 - Example

This section provides a tutorial example of DOM Level 1 objects and attributes that are supported in Firefox 2.0.

DOM Level 2 - Published in November, 2000: An API of 14 modules: Core, XML, HTML, Views, StyleSheets, CSS, CSS2, Events, User interface Events, Mouse Events, Mutation Events, HTML Events, Range, and Traversal.

Here is a tutorial example of using DOM Level 2 objects and properties:

<html>
<!-- DOM_Level_2_Example.html
   Copyright (c) 2013 by Dr. Herong Yang, herongyang.com
-->
<head>
<title>DOM Level 2 Example</title>
<style type="text/css">body {background-color: #aaaaff}</style>
</head>
<body><pre>
<script type="text/javascript" id="myScript">
   var script = document.getElementById("myScript");
   document.writeln("\ndocument.getElementById():");
   document.writeln("   .toString()="+script.toString());

   var view = document.defaultView;
   document.writeln("\ndocument.defaultView:");
   document.writeln("   .toString()="+view.toString());
   document.writeln("   .document="+view.document.toString());
   
   document.writeln("\ndocument.styleSheets:");
   var list = document.styleSheets;
   document.writeln("   .toString()="+list.toString());
   var style = list.item(0);
   document.writeln("   .item(0)="+style.toString());
   document.writeln("   .item(0).type="+style.type);
   document.writeln("   .item(0).ownerNode="+style.ownerNode);

   document.writeln("\ndocument.body.style:");
   document.writeln("   document.body.style="+document.body.style);
</script>
</pre></body>
</html>

View this JavaScript example page in Firefox 2.0, which supports DOM Level 2, you will get:

document.getElementById():
   .toString()=[object HTMLScriptElement]

document.defaultView:
   .toString()=[object Window]
   .document=[object HTMLDocument]

document.styleSheets:
   .toString()=[object StyleSheetList]
   .item(0)=[object CSSStyleSheet]
   .item(0).type=text/css
   .item(0).ownerNode=[object HTMLStyleElement]

document.body.style:
   document.body.style=[object CSSStyleDeclaration]

This JavaScript example page will not work in IE 6.0, because it does not support DOM Level 2.

Table of Contents

About This Book

Introduction to JavaScript

ECMAScript Language Specification and JavaScript Dialects

Data Types, Variables and Expressions

Flow Control Statements

Creating, Accessing, and Manipulating Arrays

Defining and Calling Functions

Web Browser Supporting JavaScript

Server-Side and Client-Side Web Scripting

Introduction to Objects