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


amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #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

#Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS? #Aug 1 What is Zdog? #Aug 1 How to add before after image effect using pure CSS? #Jul 31 Add animation to your skills bar using CSS #Jul 31 Use SwiperJS to create mobile touch sliders fast
You might also like these
Implicit and Explicit Joins in Oracle SQLSQL/MySQLObservation of Human Behavior [Shopping Observation Example]MiscellaneousPostgreSQL transactions using the BEGIN, COMMIT, and ROLLBACK statements.PostgresEssential SQL Commands We Need to KnowSQL/MySQLSubquery in PostgresPostgresIntroduction to Angular modules Part 1: NgModule metadataAngular