Basic DOM Document Attributes and Methods

DOM Basics for HTML – Part 6

DOM for HTML

Foreword: In this part of my series, I talk about Basic DOM Document Attributes and Methods.

By: Chrysanthus Date Published: 13 May 2015

Introduction

This is part 6 of my series, DOM Basics for HTML. In this part of my series, I talk about Basic DOM Document Attributes and Methods. Today, it is possible for you to create a document using mainly DOM. Consider the following document code and its equivalent DOM (node) Tree:

<!DOCTYPE html>
<html>
<head>
  <title>Another Page</title>
</head>
<body>
  <h1>Another Page</h1>
  <p>This is a <a href="demo.htm">simple</a> sample.</p>
  
</body>
</html>

|_DOCTYPE: html
|
|_html
    |
    |_head
    |   |
    |   |_text: \n sp sp
    |   |
    |   |_title
    |   |   |
    |   |   |_text: Another Page
    |   |
    |   |_text: \n sp
    |
    |_text: \n sp
    |
    |_body
        |
        |_text: \n sp sp
        |
        |_h1
        |   |
        |   |_text: Another Page
        |
        |_text: \n sp sp
        |
        |_p
        |   |
        |   |_text: This is a
        |   |
        |   |_a href="demo.htm"
        |   |   |
        |   |   |_text: simple
        |   |
        |   |_text:  sample.
        |
        |_text: \n sp sp
        |
        |_comment: this is a comment
        |
        |_text: \n sp \n

In this tutorial, the body and its contents, for the above document, will be created using DOM. For simplicity, the whitespaces e.g. \n sp sp, that are not necessary, will not be added into the body. The body is created at the client computer (not at the server).

In this article, I first give you the attributes before the methods of the document node; then I give you the complete DOM code (script) to create the document body without using any HTML tag.

Document Node Attributes

implementation
The document node has an attribute called, implementation. This attribute is actually a software object. This software object has a method, which is,

    createHTMLDocument(optional DOMString title)

This method takes the title of the document to be created, creates and returns the document node. With the returned node, you can create elements in the new document.

To create a document from a script, you use the statement,

    doc = document.implementation.createHTMLDocument([title])

where doc is a reference (node) to the document created; and the optional [title] is the title of the new document in quotes, e.g. "Simple Page". doc is a variable name of your choice.

The document created has the attribute, doctype whose name is set to "html". It has an attribute, called contentType whose value is set to "text/html". It has an html element. The html element has a head element. If the title string was given in the above statement, then the head element would have a title element, with a text node whose data is the string. The new document has a body element that is empty. The new document is in the computer memory and does not have HTML tags.

URL
This is a readonly attribute (meaning you cannot change its value). This attribute is typically present in a document that was created in the web server using HTML tags. To read the URL of a document created with HTML tags, use the expression:

    document.URL

The returned value can be assigned to a variable.

doctype
This attribute too is readonly; it returns the document type node (reference) of the document. To return the reference, use the statement:

    doctypeNode = document.doctype

where doctypeNode is the variable name of your choice and it is the node of the document type. document is the document of the document created with HTML tags, or the reference (doc) returned by the createHTMLDocument() method above. The document type node (object) has an attribute called, name. This attribute holds the name of the document type, which for many web pages is, .html. To return the name of the doctype, use the following syntax:

    doctypeNode.name

documentElement
This attribute is a readonly attribute. It returns the HTML element node. To do this, use the following expression:

    document.documentElement

where document is the document of the document created with HTML tags, or the reference (doc) returned by the createHTMLDocument() method above.

Document Node Methods

getElementsByTagName(localName)
This method takes as argument an HTML tag name in quotes. It returns a collection of all the element references (nodes) that have the tag name in the document. A collection is a special type of array. To return a collection, use the following syntax:

    collection = document.getElementsByTagName(DOMString localName)

where document is of the document created with HTML tags, or the reference (doc) returned by the createHTMLDocument() method above.

Assume that a document has the following two paragraphs:

    <p>Some text here</p>
    <p>This is a <a href="demo.htm">simple</a> sample.</p>

The following code segment in a script, will display the text of each paragraph.

        collection = document.getElementsByTagName("p");
        for (i=0; i<collection.length; ++i)
            {
                allText = collection[i].textContent;
                alert(allText);
            }

In the code, collection[i] is the node of each paragraph. Do not confuse between the textContent attribute of an element and the data attribute of the text node of an element. The textContent attribute for an element (node) returns the text of all inclusive descendants of the element (node). The text node is an inclusive descendant of the element; it is not the element itself. The text for a text node is returned by the data attribute of the text node.

getElementsByClassName(classNames)
This method takes as argument, a class name in quotes. It returns a collection of all the element nodes (references) that have the same class name in the document. The syntax to use this method is:

    document.getElementsByClassName(classNames)

createElement(localName)
This method creates an element node in the document. The syntax to do this is:

    nod = document.createElement(localName)

The node belongs to the document, but it is not a child node of any parent node yet.

The return value is the element node (reference held by nod); nod is a name of your choice. The argument is the HTML tag name of the element in quotes. document is the document node of the HTML document with tags, or the reference (doc) of a document created by the method, createHTMLDocument([title]).

You can use the node of the created element to give the ID of the element as follows:

    nod.id = "ID"

Remember, id is an attribute of the element.

If you have the ID of the element and you do not have the node (reference) of the element, you can obtain the node with the following expression:

    nod = document.getElementById('ID')

createTextNode(data)
This method takes a string in quotes and returns a text node. The argument string is the data for the text node. The text node belongs to the document, but is not a child node of any element (node). You use this method with the following syntax:

    document.createTextNode(DOMString data)

So there are two ways of creating a text node: you either use the reserved word, new or the createTextNode() method.

createComment(data)
This method takes a string in quotes and returns a comment node. The argument string is the data for the comment node. The comment node belongs to the document, but is not a child node of any element (node). You use this method with the following syntax:

    document.createComment(DOMString data)

So there are two ways of creating a comment node: you either use the reserved word, new or the createTextNode() method.

innerHTML
This is an attribute for any element. It is used in the following syntax:

    document.getElementById('ID').innerHTML

It returns a string sequence of all the tags and text within the element identified by ID. Assume that you have the document:

<!DOCTYPE HTML>
<html>
<head>
    <title>Simple Page</title>
</head>
<body id="B1" style="color:darkblue">
  <p>This is a <a href="demo.htm">simple</a> sample.</p>
</body>
</html>

Also assume that you have a script that has the following code:

        innerhtml = document.getElementById('B1').innerHTML;
        alert(innerhtml);

With these, the display will be,

        <p>This is a <a href="demo.htm">simple</a> sample.</p>

The result may also include the script, if the script is in the body element.

body Attribute
body is a special attribute for the document node. The expression,

    document.body

returns a reference to the body element of the document with HTML tags. The expression,

    doc.body

returns a reference to the body element of the document that is not built from HTML tags (that is only in the DOM). Here, doc is a variable of your choice that holds the reference to the document created only in DOM.

Code Example
Read and try the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Another Page</title>
</head>

    <script type="text/ECMAScript">

        //create the nodes and attributes
        elementNodeB = document.createElement("body");
        document.body = elementNodeB;

        elementNodeH1 = document.createElement("h1");
        textNodeH1 = document.createTextNode("Another Page");
        elementNodeP = document.createElement("p");
        textNodeP1 = document.createTextNode("This is a ");
        elemenNodeA = document.createElement("a");
        elemenNodeA.setAttribute("href", "demo.htm");
        textNodeA = document.createTextNode("simple");
        textNodeP2 = document.createTextNode(" sample.");
        commentNode = document.createComment("this is a comment");

        //attach the nodes
        elementNodeH1.appendChild(textNodeH1);
        document.body.appendChild(elementNodeH1);

        elementNodeP.appendChild(textNodeP1);
        elemenNodeA.appendChild(textNodeA);
        elementNodeP.appendChild(elemenNodeA);
        elementNodeP.appendChild(textNodeP2);
        document.body.appendChild(elementNodeP);
        document.body.appendChild(commentNode);

    </script>

</html>

That is it for this part of the series.

Chrys

Broad Network

Related Articles