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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
PHP __construct() functionPHPHow to Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLHow to deploy Angular App on Dreamhost or Amazon S3 or firebase?AngularHow to Use SQL MAX() Function with Dates?SQL/MySQLHow to select an element using its ID without the high specificity of the ID selector?CSSVariables and Distance Functions in SCSS (Sass)SCSS