VirtualMV/JavaScript/DocumentObject/Home

Overview

: Understand the DOM

• Understand the Document Object Model

In order for a computer to understand a document, it needs to follow a pre-defined structure built up of identifiable objects (document objects).

On a computer the term document is used to represent many file types, indeed we use folders to arrange computer documents (files?) including Word-processing (from MS-Word or Open Office), Spreadsheets, to databases and multimedia files (such as images, sounds and videos).

Kantor (2006)[1] identified 3 aspects that define a document:

• content
• structure, and
• style.
 aspect Text document HTML document content the information, ormeta-information(properties e.g. author, table of contents, etc.) information: content in the , meta:contained in the tag structure chapters, paragraphs, lists Formatting tags such as:

,

,
• style includes the fonts, colours, etc. At top level can identify the output media, screen, printer, Braille, (w3c:Media types, n.d.)[2]to identifying how to display fonts, colours, backgrounds, etc. usually via the style attribute.
• Not all documents will contain all three, for example a file containing a list of names and addresses to be used by another computer could have no style information. However, any document to be used for human interaction or display will have all three.

Document tree

The DOM can be thought of as a tree diagram constructed from the tags in an HTML page.

<html>
<title>Simple DOM example</title>
<script type="text/javascript">
function fnDisplayName() {
strMessage=document.myForm.txtFname.value;
strMessage=strMessage +" " +document.myForm.txtLname.value;
}
</script>
<body>
<h1>Name Form</h1>
<form name="myForm">
<input type="text" name="txtFname" value="" />
<input type="button" value="Press Me" onClick="fnDisplayName()" /></p>
<div id="Msg"></div>
</form>
</body>
</html>

So a simple DOM for the web page is:

<html>
|  |-<title>
|  '-<script>
'-<body>
|-<h1>
'-<form>
|-<p>
|-<input>
|-<input>
'-<div>

If you look closely at the example you can see that a form element can be referenced by navigating the DOM tree (document can be related to the body tag).

document.myForm.txtFname.value;

Another one you have come across is the document.write command where a line of text (usually html code) is inserted into the web page.

getElementById

In practice in Javascript we normally use getElementByID and provide the elements with an id attribute. So in the example above we can replace

with

document.getElementById('Msg').innerHTML = "Hello " + strMessage;

and the div tag contents will change on the form.

<html>
<title>getElementById Example</title>
<style>
.displayInfo 	{
width: 300px; height: 50px; border: 1px solid #808080;
margin-right:auto;margin-left:auto; background-color: #F6F9ED;
font-weight: bold; cursor: pointer;}
</style>
<script type="text/javascript">
function fnX(){
document.getElementById('ShowInfo').innerHTML = "YYY";
}
</script>
<body>
<div id="ShowInfo" class = "displayInfo" onClick="fnX();">XX</div>
</body>
</html>

Resources

References

1. Kantor, P. L. (2006). Peter L. Kantor - Lectures and References. Retrieved June 14, 2009 from http://www.daaq.net/index.php?path=reference/documents/
2. w3c:Media types (n.d.) Media types. Retrieved June 14, 2009 from http://www.w3.org/TR/CSS2/media.html
 VirtualMV/JavaScript/DocumentObject/Home. (2022). In WikiEducator/VirtualMV wiki. Retrieved July 1, 2022, from http:https://wikieducator.org/VirtualMV/JavaScript/DocumentObject/Home    (zotero)