DOM Element Node

DOM Basics for HTML – Part 4

DOM for HTML

Foreword: In this part of the series I talk about attributes and methods of the DOM Element node.

By: Chrysanthus Date Published: 13 May 2015

Introduction

This is part 4 of my series, DOM Basics for HTML. In this part of the series I talk about attributes and methods of the DOM Element node. You should have read the previous parts of the series before reaching here; this is a continuation. The first half of this tutorial talks about the roles of the attributes and methods. The second half talks about the coding and application of the attributes and methods.

Roles of Attributes and Methods

Attributes

localName
This attribute returns the localName of the element. For simplicity, consider localName as tagName. This is a read only attribute, meaning you cannot change its value.

tagName
This attribute returns the tag name of the element. For the body element, BODY is returned; for the paragraph element, P is returned; for the a element, A is returned; etc. This is a readonly attribute, meaning you cannot change its value. The a element is the hyperlink element.

id
The ID attribute returns the ID of the element. Consider the following a element:

<a href="demo.htm" id="a1">

The ID of this element is, ‘a1’, which would be returned by the id attribute.

className
This attribute is used with CSS – see later.

attributes
This attribute, returns a readonly array of the attribute list of the element. The attribute list is a list of all the attributes of the element. The returned read only array is live; i.e. changes to the associated attributes are reflected (seen) in the array. Do not confuse between attributes and child nodes. Attributes are properties of the node. Child nodes are descendant nodes (of the node).

Methods

getAttribute(name)
This method takes the name of an attribute in quotes, and returns the value of the attribute (of the element).

setAttribute(name, value)
This method takes as arguments, the name of an attribute of the element and the new value you want for the attribute. It sets the attribute and the effect is seen on the screen. The attribute name and value are typed in quotes.

removeAttribute(name)
This method removes the attribute from the element; that is, both the name and value of the attribute become ineffective, and the element adopts the default value. The name for the attribute is typed as argument within quotes.

hasAttribute(name)
This method takes the name of the attribute in quotes, as argument, and returns true if the element has the attribute or false if the element does not have the attribute.

matches(selectors)
This method is used with CSS – see later.

getElementsByTagName(localName)
An HTMLCollection is an array of HTML elements of a particular category. Imagine that you have an element with other elements within. For example, you can have a p element with two a elements within it. This function can take the tag name of the internal elements (e.g. a elements) in quotes, as argument. It will return a collection of all the internal elements.

Using Element Node Attributes and Methods

Accessing Element Node Attributes
To access an element’s attribute, use the following syntax:

document.getElementById('ID').attributeName

You can use this expression to read (get) or change (set) the value of the attribute. ID is the ID of the element. With the exception of the DOCTYPE and comment tags, most HTML elements can have ID. Note: attributes that are readonly, cannot be set, even with this syntax.

Generally with the DOM, when an attribute is set, it takes effect immediately, and you see the effect on screen.

Using Element Node Methods
The syntax to use an element’s node method is:

document.getElementById('ID').methodName(arguments)

The rest of this tutorial shows how to use the above attributes and methods, in code.

Element Node Attributes and Methods in Code

Using Element Node Attributes
The following code shows how to use the attributes of the Element Node. The attributes that are not readonly can be gotten (read) and set (changed).

<!DOCTYPE HTML>
<html>
<head>
    <title>Illustration</title>
</head>
<body id="B1" style="color:darkblue">
    <h1 id='HS1'>Illustration</h1>
    <p id="P1" class='aaa'>This is a <a href="demo.htm" id="a1">simple</a> sample.</p>
    

    <script type="text/ECMAScript">
        localname = document.getElementById('HS1').localName;
        alert(localname);
        tagname = document.getElementById('HS1').tagName;
        alert(tagname);
        id = document.getElementById('HS1').id;
        alert(id);
        document.getElementById('HS1').id = "HA";
        id2 = document.getElementById('HA').id;
        alert(id2);
        classname = document.getElementById('P1').className;
        alert(classname);
        document.getElementById('P1').className = "bbb";
        classname2 = document.getElementById('P1').className;
        alert(classname2);

        collection = document.getElementById('B1').attributes;
        for(i=0; i<collection.length; ++i)
            {
                attribut = collection[i];
                alert(attribut.name);
            }
    </script>

</body>
</html>

The first line in the script returns the localName. The third line returns the tagName. The fifth line returns the ID of the h1 element. The seventh line sets (changes) the attribute of the h1 element. The tenth line returns the className of the p element. The twelfth line sets (changes) the className of the p element. The last code segment in the script, returns an array (collection) of the attributes of the body element, and then displays the names of the attributes.

Using Element Node Methods
The following code shows how to use the methods of the Element Node.

    <script type="text/ECMAScript">
        styl = document.getElementById('B1').getAttribute("style");
        alert(styl);
        document.getElementById('B1').setAttribute("style", "color:brown");
        styl2 = document.getElementById('B1').getAttribute("style");
        alert(styl2);
        document.getElementById('B1').removeAttribute("style");
        bool = document.getElementById('B1').hasAttribute("style");
        alert(bool);

        collection = document.getElementById('B1').getElementsByTagName("p");
        for(i=0; i<collection.length; ++i)
            {
                elemen = collection[i];
                alert(elemen.textContent);
            }
    </script>

You can test this script by replacing the previous script with it. The first line gets (reads) the style attribute of the body element. The third line sets (changes) the value of the style attribute of the body element. The sixth line removes the style attribute of the body element. The seventh line checks if the style attribute of the body element still exists. The last code segment in the script, returns an array (HTML collection) of the elements of the body element, with the tag name, p, and then displays the texts of the p elements in the collection.

That is it for this part of the series. We stop here and continue in the next part.

Chrys

Broad Network

Related Articles

DOM Element Node

DOM Basics for HTML – Part 4

DOM for HTML

Introduction

Related Links

Comments