DOM Attributes And Custom Properties

A DOM node have the many attributes and the properties. The attributes and properties are the two different things.

Properties

DOM node is an object, So it can store the any custom properties and the methods.

DOM node object is the same as the any JavaScript object.

JavaScript Simple Object

// Object
var object = {

    // Properties
    FirstName: "James",
    LastName: "Bond",

    // Method
    toString: function () {
        return "Hello Mr. " + this.FirstName + " " + this.LastName;
    }
};

Above is the example of the simple JavaScript object.

DOM node object is simply look like the above object, So we are able to add the our custom properties and the methods inside the DOM node.

Properties are only visible into the JavaScript not in the HTML document (innerHTML).

Properties can store the any type of values.

As you know the document.body is the DOM node, which points the BODY tag of the HTML document.

Let’s add the one custom property and the method inside the document.body DOM object.

// Custom property
document.body.MyProperty = "This is the our custom property.";

// Custom method
document.body.MyMethod = function () {
    // Uses of the custom property
    alert(document.body.MyProperty);
};

// Uses of the custom method
document.body.MyMethod();

In above example I added the custom property and the custom method inside the DOM node.

Points to remember:

• In DOM node we add the custom property and the custom method as many as we want.
• Properties can store the any type of value.
• Property’s name is the case-sensitive.
• Properties does not affect the HTML.
• Properties does not visible into the innerHTML. (It means if we see the HTML of the any DOM node using the innerHTML property the custom properties will be not visible to us.)
• Custom Properties are separate from the HTML, It only visible in the JavaScript.

All the properties including the custom properties will be visible into the for…in loop.

document.body.Custom1 = "Custom1";
document.body.Custom2 = "Custom2";
var array = [];
for (var key in document.body) {
    array.push(key);
}
alert(array.join("\n"));

When you run the above code you will found the our custom properties.

Attributes

DOM nodes have the many attributes.

<!--HTML DOM Node-->
<p name="pMessage" style="font-weight:bold;">Hello, JavaScript Hive</p>
<!--Here, name and style is the attribute-->

We can access or modify the attributes using the below methods:

DOMElement.hasAttribute() : Check, The specified attribute is exist or not.
DOMElement.getAttribute() : Get the value of the specified attribute.
DOMElement.setAttribute() : Set the value of the specified attribute. (If the attribute is exist than change it’s value otherwise add the new attribute)
DOMElement.removeAttribute() : Remove the specified attribute.

Points to remember:

• The value of the attribute always will be the string.
• Name of the attribute is not case-sensitive.
• Attributes will be shown in the HTML document (innerHTML).

HTML:

<p name="welcome_message" style="font-weight:bold;">Welcome to JavaScript Hive.</p>

JavaScript:

var p = document.body.children[0];

// welcome_message
alert(p.getAttribute("name"));

// true
// Because the p tag have the "style" attribute.
alert(p.hasAttribute("style"));

// Remove the "style" attribute from the p tag.
p.removeAttribute("style");

// false
// Because we remove that attribute from the p tag.
alert(p.hasAttribute("style"));

// Add the new attribute "id" to the p tag.
p.setAttribute("id", "pTag");

Properties And Attributes Synchronization

Most of the properties and attributes of DOM node is synchronized, Yes we can access the value of the attribute using the property as well.

Here is the list of the some synchronized properties and attributes:

• id,
• value,
• name,
• class/className

Let see with the small example:

HTML:

<input type="text" name="txtName" value="Mr. James Bond"/>

JavaScript:

var p = document.body.children[0];
alert(p.getAttribute("name")); // txtName
alert(p.name); // txtName

alert(p.getAttribute("value")); // Mr. James Bond
alert(p.value); // Mr. James Bond

// The value of the text box will be change here.
p.setAttribute("value", "Mr. Smith");
alert(p.value); // Mr. Smith

p.setAttribute("class", "abc");
alert(p.className); // abc

As you seen in above example, We can access the value of the attribute also using it as the property, with the same name or some time with the different name.

Here the actual attribute is the class, but the class is reserved keyword by the JavaScript, So here we can get the value of the class attribute using the className property.

In above example, In input field there is the no class attribute, So when the setAttribute() method is called it will not found the attribute named with the “class”, so it will add the attribute with the name “class” and set it’s value.

Property vs Attribute

Property	Attribute
Can store the any type of value.	Can store the only string type of value.
Names are the case-sensitive	Names are not the case-sensitive
Don’t shown up in the HTML document (innerHTML).	Visible in the HTML document (innerHTML).

Custom properties is not synchronized with attribute, Only the standard attribute and properties are synchronized.

Most of the time programmers are uses the properties only.