JavaScript Tutorials - Herong's Tutorial Examples - Version 2.21, by Dr. Herong Yang
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
ECMAScript Language Specification and JavaScript Dialects
Data Types, Variables and Expressions
Creating, Accessing, and Manipulating Arrays
Defining and Calling Functions
Web Browser Supporting JavaScript
Server-Side and Client-Side Web Scripting
Defining Your Own Object Types
Inheritance of Properties and Methods through the Prototype Object Chain
'jrunscript' - JavaScript Shell Command from JDK
Using Functions as "Function" Objects
Introduction to Built-in Object Types
►W3C's Document Object Model (DOM) Specifications
Overview of DOM Specifications
DOM Level Test - document.implementation.hasFeature
Inheritance vs. Flattened Views of the API
A Web Document as A Tree of Different Interfaces
A Web Document as A Tree of Nodes
Dump Document in a New Window - JavaScript Source
Dump Document in a New Window - Firefox 2.0 Result