Introduction to DOM5 HTML

DOM5 HTML – Part 1

Forward: In this part of the series, I introduce you to the DOM5 HTML.

By: Chrysanthus Date Published: 26 Jul 2012

Introduction

This is part 1 of my series, DOM5 HTML Basics. In this part of the series, I introduce you to the DOM5 HTML. DOM5 HTML stands for “DOM version 5, a branch of HTML”. DOM stands for “Document Object Model”. ECMAScript enables you to make a website interactive. However, it has its limits. It cannot, on its own, be used to change the values of html element attributes. For example, you cannot use ECMAScript on its own to change the background color of an element. This kind of change can be handy in a game.

DOM is one of those types of software, called Application Programming Interface. DOM is part of your browser. DOM is considered as part of HTML today. It is a set of objects that represent the html elements in the computer memory, while the web page is displayed. These objects have properties and method that can be used to modify the html elements displayed on the screen. Today, you can even use DOM to replace the elements displayed on the screen. For example, you can use it to change the background color of an element in a displayed web page; in this case, the original color at the server is something else. You can also use it to change the content of many html elements, whose page is currently displayed. The DOM has been written in the form of ECMAScript objects. You use, ECMAScript to program the DOM.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Prerequisite
You should have completed the following series before starting this one:

    ECMAScript Basics

Accessing the Attribute of an HTML Element
To access an element object in memory, from a script, you can start be typing the reserved word, document. This refers to the html document in memory. Then you type a dot and the function call getElementById('ID'). The argument to this function is the ID of the element, in quotes. ECMAScript and DOM are case sensitive, so you must respect casing for these reserved words and function names. To access the attribute, after typing the function, you type a dot and then the attribute name. So, in the case of the img (image) element, you can have something like,

    document.getElementById('ID').src

where “document.getElementById('ID')” accesses the element. All of “document.getElementById('ID').src” accesses the attribute.

The script of the following web page reads the value of the href attribute of an a element and displays it in an alert box:

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <a href=http://www.mysite.com/file.htm id="A1">Example Link</a>

    <script type="text/ECMAScript">
        attributeValue = document.getElementById('A1').href;
        alert(attributeValue);
    </script>

</body>
</html>

Read and try the above code, if you have not already done so.

Accessing Content of Double-Tag Elements
DOM allows you to access the content of a double-tag element. The attribute for this is, “innerHTML”. Note the casing. So, for a span element, you would have something like,

        attributeValue = document.getElementById('ID').innerHTML;

Read and try the following code, whose script reads and displays the content of the span element.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body>

    <p>for the paragraph; <span id="S1">for spanning</span>; for the paragraph</p>

    <script type="text/ECMAScript">

        content = document.getElementById('S1').innerHTML;
        alert(content);

    </script>

</body>
</html>

Use of ID
Now that you are getting to be writing DOM scripts, when you design a web page, make sure each html element has an ID, because, most of the times, you will be accessing the attributes and contents of html elements using the IDs of the elements. In DOM, the main way to access an element is to identify the element by the ID.

DOM Tree
The elements of an html document are in the form of a tree. For a span element inside a paragraph element, the paragraph element is the parent of the span element. The meaning of tree in DOM is in the light of parent, child, grandchild, etc. We shall make use of this in a later series. In this series we shall use the getElementById('ID') function, preceded by a dot and the word, document, to access an element. After that phrase, typing a dot and the name of an attribute, makes the whole expression access the attribute of the element (and not just the element). In DOM you normally access attributes and not elements.

Position of Script
In this tutorial, I have placed the script in the body element after the html elements involved (have been typed). If you place the script in the head element or in the body element before the html elements involved, are typed, the script will not work. This is because the elements involved, have not yet been defined, so far as the script is concerned.

With basic simple ECMAScript scripting, you can place the script (ECMAScript) in the head element and there would be no problem. However, here, we are dealing with a special kind of ECMAScript, which deals with the DOM. Call this DOM scripting. Your DOM script should be place below the elements involved in the web page. Nothing stops the DOM script from having a relationship with any script (ECMAScript) above it (say in the head element). Read and try the following code and note that it does not work.

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
    <script type="text/ECMAScript">
        attributeValue = document.getElementById('A1').href;
        alert(attributeValue);
    </script>
</head>
<body>

    <a href=http://www.mysite.com/file.htm id="A1">Example Link</a>

</body>
</html>

Changing the Attributes and Contents
A DOM script is an ECMAScript with DOM features, just like the above working scripts. DOM scripts can be used to change the attributes and contents of html elements, while the web page is being displayed. For example, the DOM script can be used to change the background color of an element. While the web page is displayed, the background-color can even be changed into three different colors. We shall see more about this in the following chapters.

Let us end here for this part of the series and continue in the next part.

Chrys

Broad Network

Introduction to DOM5 HTML

DOM5 HTML – Part 1

Introduction

Related Links

Comments