Attributes and Properties in JavaScript and HTML

Attributes in HTML

In HTML DOM attributes Property, the attributes property returns a collection of the specified node's attributes, as a NamedNodeMap object.

For example,

<img id="myImg" alt="Flower" src="klematis.jpg" width="150" height="113">

The img element has 5 attributes in the example above.

One more example,

<button id="myBtn" onclick="myFunction()">Click</button>

The button element has 2 attributes in the example above.

JavaScript Object Properties

Properties are the values associated with a JavaScript object.

A JavaScript object is a collection of unordered properties. Properties can usually be changed, added, and deleted, but some are read only.

How to access JavaScript Properties?

Use dot notation

objectName.property 

OR use bracket notation

objectName["property"]

OR use expression

objectName[expression]

How to add new properties to an existing object?

You can add new properties to an existing object by simply giving it a value.

Let's assume that person object exists and we want to add a new property named as nationality.

person.nationality = "English";

How to delete properties from an existing object?

The delete keyword deletes a property from an object.

delete person.nationality

The delete keyword deletes both the value of the property and the property itself. After deletion, the property cannot be used before it is added back again.

Property Attributes

All properties have a name. In addition they also have a value. The value is one of the property's attributes. Other attributes are: enumerable, configurable, and writable. These attributes define how the property can be accessed.

In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable).

Credit: w3schools js_object_properties and w3schools node props

Share this post