Yogesh Chauhan's Blog

Attributes and Properties in JavaScript and HTML

in HTML & JavaScript on March 11, 2020

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


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
What’s new in Constructor in PHP 8?PHPHow to uninstall Cocoapods from the Mac OS?MiscellaneousSolution to Precision Problem in JavaScript NumbersJavaScriptWhat’s a Web Storage API in JavaScript?JavaScriptHow to define visibility for a property in PHP?PHPSome SQL LIKE Operators We Need to Keep in MindSQL/MySQL