Blog

You can increase your application’s reliability and maintainability by testing your code to find errors earlier using Jest. Jest is a popular choice for JavaScript testing, particularly for applications made using Node.js, React, Angular, and Vue.js. Let us look at Jest’s features and how to use them.

What is Jest?

The Jest testing framework, created by Facebook, focuses efficiency and adaptability. Jest easily integrates with JavaScript and TypeScript applications and supports popular libraries and frameworks like React. Among its main features are integrated mocking support, zero configuration and snapshot testing.

Features of Jest

Here are some features you need to know before working with Jest −

• Zero Config: To start creating and delivering tests, virtually no configuration is needed. But the test suite can also be provided using a configuration file.
• Snapshots: Snapshot testing can also be enabled using Jest. In simple terms, the saved snapshot and the snapshots are compared to see whether there is any matching functionality.
• Isolated testing: To reduce execution time, Jest tests are executed in parallel.
• Mocking Support: Jest makes it easy to create fictitious functions so you can test how your code interacts with other components.

Setting Up Jest

For using Jest you have to first install it in your project. Use the below steps −

1. Initialize a Project: So you have to open a terminal and navigate to your project folder then run the below command −

npm init -y

2. Install Jest: Then you have to run the below command −

npm install --save-dev jest

3. Add Jest to Your Scripts: Locate the package.json file and in this file you have to add the following line −

"scripts":{"test":"jest"}

Now you can write your first test for your JavaScript code.

Example 1

Here is the simple and basic test that checks if the function sum returns the proper result.

// sum.jsfunctionsum(a, b){return a + b;}
module.exports = sum;

Test File

Here is the test file code −

// sum.test.jsconst sum =require('./sum');test('adds 1 + 2 to equal 3',()=>{expect(sum(1,2)).toBe(3);});

Run the above test code by the following command −

npm test

In this test – expect(sum(1, 2)).toBe(3); checks that sum(1, 2) returns 3.

Example 2

Jest handles asynchronous testing easily. Let’s create an asynchronous function and test it.

// fetchData.jsasyncfunctionfetchData(){return'freeCodeCamp';}
module.exports = fetchData;

Test File

Here is the test file code −

// fetchData.test.jsconst fetchData =require('./fetchData');test('the data is freeCodeCamp',async()=>{const data =awaitfetchData();expect(data).toBe('freeCodeCamp');});

Here Jest executes expect after fetchData() is complete.

Example 3

Mock functions let you test and model code interactions without needing the actual function. This is how to create a simple mock function.

const myMockFunction = jest.fn(x=> x +42);test('mock function test',()=>{expect(myMockFunction(0)).toBe(42);});

In this test, jest.fn() is used to generate a mock function that adds 42 to any input value. This test confirms that when myMockFunction(0) is invoked, 42 is returned.

When an object creates a direct or indirect reference to itself, it is known as circular referencing. It makes the loop closed. JavaScript has the same circular referencing issue as other programming languages. A few errors of JavaScript circular referencing modes will be discussed in this chapter.

What is a Circular Reference in JS?

In JavaScript, a circular reference happens when two or more objects make reference to one another in a way that starts a loop. You have a circular reference, for example- if object A refers to object B and object B in turn refers back to object A.

Example

Here is the basic example of circular reference in JavaScript −

let person ={};let friend ={};// Making a circular reference
person.bestFriend = friend;
friend.bestFriend = person;

This creates a loop in which person refers a friend, who in turn mentions the person.

Problems With Circular References

It is preferable to organize data without cross-references between objects in order to prevent circular references.

• Memory leaks: These happen when JavaScript’s garbage collection refuses to remove objects with circular references resulting in memory that is not released.
• Stringify errors in JSON: Errors happen when circular references are tried to be converted to JSON, for example, by using JSON.stringify(). Because this method cannot support circular structures, an error will be produced.

let obj ={};
obj.self = obj;// Throws "TypeError: Converting circular structure to JSON"JSON.stringify(obj);

How to Fix Circular References

A few standard methods can be used to correct circular references. These include using particular libraries that can handle circular structures, removing references prior to converting to JSON and rearranging data to prevent loops.

Remove Circular References

Find the location of the circular reference and remove it if it is not needed.

let obj1 ={};// Avoid circular reference by not pointing obj1 back to obj2let obj2 ={ obj1: obj1 };

console.log(JSON.stringify(obj2));

Output

This will generate the below result −

{"obj1":{}}

Use a Custom toJSON Method

If you want to stringify an object with circular references you can create a custom toJSON function to ignore them.

let obj ={};
obj.self = obj;

obj.toJSON=function(){let copy ={...this};// Remove circular referencedelete copy.self;return copy;};// This will now work without errors
console.log(JSON.stringify(obj));

Output

This will lead to the below output −

{}

Use a Library

Some libraries like flatted or circular-json can handle circular references automatically. Use the package instead of JSON.stringify() after installing it.

// Using circular-json const CircularJSON =require('circular-json');let obj ={};
obj.self = obj;let jsonString = CircularJSON.stringify(obj);// Converts circular structure to JSON without error
console.log(jsonString);

Output

This will produce the following outcome −

{"self":"~"}

The stages of Bubble Sort are covered in this chapter, which includes a JavaScript implementation. The word ‘sort’ refers to the process of rearranging the elements in ascending order.

Bubble Sort Algorithm

Bubble sort is a great starting point for those who are new to sorting. Since its algorithm looks similar how our brains usually think about sorting by comparison it is among the most simple sorting techniques.

When using Bubble Sort the adjacent elements in the array are compared and if the first element is greater than the second the places are switched. In this way the highest value “bubbles” will come at the top.

At the end of each iteration, the parts nearest the right are frequently in the correct order. The process is repeated until each element is in the right place.

Now let us see what exactly bubble sort does −

• Starting with the first element in the array and compare it to the current element.
• If the array’s current element is bigger than the next element, switch them.
• If the current element is less than it and just move on to the next one.
• Continue from Step 1 again.

Demonstration of Bubble Sort

Here are the iterations of the bubble sort −

Iteration 1:[8,3,7,1,5]->[3,8,7,1,5]->[3,7,8,1,5]->[3,7,1,8,5]->[3,7,1,5,8]
Iteration 2:[3,7,1,5,8]->[3,7,1,5,8]->[3,1,7,5,8]->[3,1,5,7,8]
Iteration 3:[3,1,5,7,8]->[1,3,5,7,8]->[1,3,5,7,8]
Iteration 4:[1,3,5,7,8]->[1,3,5,7,8]
Final Sorted List:[1,3,5,7,8]

Implementing Bubble Sort in JavaScript

The input of the bubbleSort function is the array arr. It uses two loops. The outer loop iterates over each element up to n-1 times, where n is the array’s length. The inner loop compares and switches adjacent elements if they are out of order.

A swapped flag is used to optimize the sort. If the array is already sorted and no swaps are made during a pass so we can end the loop early.

functionbubbleSort(arr){let n = arr.length;let swapped;for(let i =0; i < n -1; i++){
  swapped =false;for(let j =0; j &lt; n -1- i; j++){// Compare adjacent elementsif(arr[j]&gt; arr[j +1]){// Swap if they are in the wrong orderlet temp = arr[j];
        arr[j]= arr[j +1];
        arr[j +1]= temp;
            
        swapped =true;}}// If no elements were swapped, the array is already sortedif(!swapped)break;}return arr;}// Example let arr =[8,3,7,1,5];
console.log("Sorted array:",bubbleSort(arr));

Output

This will generate the below result after sorting the elements −

Sorted array: [ 1, 3, 5, 7, 8 ]

Another Way to Implement Bubble Sort

Here is another way to create Bubble Sort in JavaScript using a slightly different structure −

functionbubbleSort(arr){let n = arr.length;for(let i = n -1; i >0; i--){for(let j =0; j < i; j++){// Compare adjacent elementsif(arr[j]> arr[j +1]){// Swap if they are in the wrong order// Using destructuring for swapping[arr[j], arr[j +1]]=[arr[j +1], arr[j]];}}}return arr;}// Examplelet arr =[8,3,7,1,5];
console.log("Sorted array:",bubbleSort(arr));

Output

This will produce the following result −

Sorted array: [ 1, 3, 5, 7, 8 ]

Complexities

In the worst case scenario and average case time complexity the array is in reverse order so in this situation it has O(n2) time complexity.

And in the optimal time complexity and in the ideal situation the array’s time complexity is O(n) and it is already sorted. The auxiliary space is O(1).

DOMTokenList

The DOMTokenList is an interface in DOM (Document Object Model) which represents a set of space-separated tokens (classes). Generally, it is used for managing the classes in HTML elements.

It may look like an array, but it is not. Similar to an array, you can loop through a DOMTokenList and access its tokens by index. However, you cannot use array methods such as push(), pop(), or join() on a DOMTokenList.

You can retrieve individual tokens using their numerical index in the DOMTokenList. For example, element.classList[0] would give you the first-class name of an element.

The following diagram clearly explains the JavaScript DOMTokenList interface. As you can see a DOMTokenList can contain a list of values (tokens) −

The following interactive example will use 2-3 important methods as button functionalities. Whenever the user interacts with the page, the respective method will be performed −

Click on the below buttons to see the changes…..

TutorialspointAddRemoveToggle

Below is the explanation of the example above:

• If you click the “Add” button, the ‘DOMTokenList’ add() method will be called, and the class ‘tp’ will be added to “tutorials”.
• If you click the “Remove” button, the remove() method will be called to remove the added class.
• If you click the “Toggle” button, the toggle() method will be called, which will add and remove the class alternately.

JavaScript DOMTokenList Methods

The DOMTokenList is an interface that represents a set of space-separated tokens. These tokens can be seen in properties such as classList, HTMLLinkElement, relList, and many others.

Following is a list of methods provided by the JavaScript DOMTokenList −

Sr.No	Method & Description
1	add()This method adds one or more tokens specified in the parameter to the DOMTokenList.
2	contains()This method checks whether the list contains the specified token, and returns a boolean value accordingly.
3	entries()This method returns an iterator that is allowing to go through all the key/value pairs.
4	forEach()This method calls the callback function mentioned in the parameter once for each value pair in the list in the order of their insertion.
5	item()This method returns a token from the DOMTokenList specified by the index in the parameter.
6	keys()This method returns an iterator which allows you to go through all the keys contained in the token list.
7	remove()This method removes one or more tokens specified in the parameter to the DOMTokenList.
8	replace()This method replaces the existing token in DomTokenList with a new token specified in the parameter.
9	supports()This method checks whether the token specified in the parameter is supported in DOMTokenList.
10	toggle()This method dynamically adds or removes a token or class from an element class attribute.
11	values()This method returns an iterator allowing us to go through all values contained in the token list.

JavaScript DOMTokenList Properties

Following is a list of properties provided by the JavaScript DOMTokenList −

Sr.No	Properties & Description
1	lengthThis method returns the number of tokens in a token list.
2	valueThis method returns the DOMTokenList serialized as a string.

Example 1: Retrieving the length of the DOMTokenList.

The following example demonstrates the usage of the DOMTokenList length property −

<!DOCTYPE html><html lang="en"><body><p>DOMTokenList Example</p><div id="myList"class="tp1 tp2 tp3">I'm inside div.</div><span id="result"></span><script>let list = document.getElementById("myList").classList;
    document.getElementById('result').innerHTML ="DOMTokenList length (number of classes) is : "+ list.length;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The above program returns the length of the DOMTokenList (or number of classes) −

DOM NodeList

The NodeLists are similar to an array or HTMLCollection containing the HTML elements. However, it is not the same as the array or HTML collection.

All modern browsers return the node list when you use querySelectorAll() method and childNodes properties. You can traverse the NodeList as an array but can’t use other array methods like map(), filter(), etc, with node lists.

The following diagram clearly explains the JavaScript NodeList interface. As you can see, an HTML code snippet contains all types of nodes:

JavaScript DOM NodeList Methods

Following is a list of methods provided by the JavaScript NodeList −

Sr.No	Method & Description
1	entries()This method retrieves an iterator, that allows us to iterate through all the key/value pairs in the object.
2	forEach()This method calls the callback function mentioned in the parameter once for each value pair in the list in the order of their insertion.
3	item()This method retrieves a node from the NodeList specified by the index in the parameter.
4	keys()This method retrieves an iterator that allows us to go through all the keys contained in the NodeList.

JavaScript DOM NodeList Properties

Following is a list of properties provided by the JavaScript NodeList −

Sr.No	Properties & Description
1	lengthThis method returns the number of items in the NodeList.

Example 1: Retrieving a specific element from a NodeList.

The following example demonstrates the usage of the JavaScript DOM NodeList −

<!DOCTYPE html><html lang="en"><head><title>JavaScript DOM NodeList</title></head><body><div><p>This is first paragraph.</p><p>This is second paragraph.</p><p>This is third paragraph.</p><p>This is fourth paragraph.</p></div><script>
    let myNodeList = document.querySelectorAll('p');
    //you can access the node list by index
    //access the third node list
    alert("This is third P: " + myNodeList[2].innerHTML);
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The program uses "querySelectorAll()" to select all "p" elements as a NodeList. By passing the index value as "2", it alerts the third "p" element in the document −



Example 2: Adding Style to NodeList (<div>) element.



In this example, we use the "getElementsByTagName('div')" method to select all "<div>" elements and return them as a NodeList. Now, we can apply styles to these elements −



<!DOCTYPE html><html lang="en"><head><title>JavaScript DOM NodeList</title><style>
    button{
        padding: 8px 20px;
        margin: 20px 0px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;Click the button below to add style to all "div" elements.&lt;/p&gt;&lt;div&gt;Div 1&lt;/div&gt;&lt;div&gt;Div 2&lt;/div&gt;&lt;div&gt;Div 3&lt;/div&gt;&lt;div&gt;Div 4&lt;/div&gt;&lt;div&gt;Div 5&lt;/div&gt;&lt;button id="btn"&gt;Add style&lt;/button&gt;&lt;script&gt;
   document.getElementById('btn').addEventListener("click", ()=>{
  //using getElementsByTagName() method
  let myNodeList = document.getElementsByTagName('div');
  //using length property
  for(let i = 0; i&lt;myNodeList.length; i++){
      myNodeList[i].style.color = 'white';
      myNodeList[i].style.padding = "10px";
      myNodeList[i].style.margin = "5px";
      myNodeList[i].style.border = "1px solid black";
      myNodeList[i].style.backgroundColor = "green";
  }
   });
&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


On executing the above program, a button is displayed. When clicked, it applies a new style to all "div" elements −



Example 3: Using the forEach() method to traverse the NodeList elements.



In this example, we have four <p> elements. We use "querySelectorAll('.lang')" to select all elements with the class "lang" and traverse the NodeList using "forEach()" method −



<DOCTYPE html><html><body><p class="lang"> English </p><p class="lang"> German </p><p class="lang"> Arabic </p><p class="lang"> Hindi </p><br><div id ="output"></div><script>const output = document.getElementById('output');
  output.innerHTML +="All languages are: &lt;br&gt;";const langs = document.querySelectorAll('.lang');
  langs.forEach((language)=&gt;{
     output.innerHTML += language.innerHTML +'&lt;br&gt;';})&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


After execution, the above program displays all "p" elements having the the class name equal to "lang" −



Example 4: Retrieving the length of the NodeList.



In the below code, we have used the 'length' property of the NodeList to count the number of nodes in the NodeList.



<DOCTYPE html><html><body><div class="fruit"> Apple </div><div class="fruit"> Orange </div><div class="fruit"> Banana </div><div class="fruit"> Mango </div><div id ="output">Total number of fruits are :</div><script>const fruits = document.querySelectorAll('.fruit');
  document.getElementById('output').innerHTML += fruits.length;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The above program returns the length of NodeList −



Difference between HTMLCollection and NodeList



The HTMLCollection and NodeList look similar, but there is a minor difference between them, which we have explained in the table below −



Feature
HTMLCollection
NodeList
Return by
Generally, getElementByClassName(), getElementByTagName methods, and children properties return the HTML collection.
Generally, the querySelectorAll() method and childNodes property return the Node list.
Array methods
It supports limited array methods.
It also supports limited array methods like forEach().
Live collection
Some browser supports live collection with HTML collection.
It updates if you update the DOM element.

DOM Collections

The DOM (Document Object Model) collections are a way to group together related HTML elements. They are read-only and can be accessed using the properties of DOM objects such as the document object or a DOM node.

There are many different types of DOM collections, including:

• The HTMLCollection object is an array-like list (collection) of HTML elements.
• The NodeList object is a list (collection) of nodes extracted from a document.
• The Form element collection in HTML DOM is used to set or return the collection of all <input> elements inside a form element.
• The HTML DOM forms collection is used for returning all the form elements that are present inside the HTML document as a collection.

DOM collections can be used to perform a variety of tasks, such as:

• Traversing the DOM
• Adding, removing, or modifying elements
• Changing the style or content of elements
• Responding to user events

This tutorial provides basic understanding of DOM collections, particularly HTMLCollection object. The other type of DOM collections are discussed in next chapters.

The HTMLCollection Object

An HTMLCollection object is an array-like data structure of HTML elements. When you use the getElementByTagName()method to access DOM elements, it returns an HTMLCollection object.

It is the same as an array but not an array. You can traverse the HTML collection and access each HTML element through the index, but you can use the pop(), push(), etc. methods with HTML collection.

The methods and properties given below return the HTML collection.

• getElementByTagName() method
• getElementByClassname() method
• children property

Properties and Methods of DOM HTMLCollection Object

Here, we have listed the properties and methods that can be used with HTML collections.

Method / Property	Description
length	To get a count of HTML elements in the collection.
item()	To get elements from the specific index.
namedItem()	To get the HTML element using its id from the given collection.

Example: Traversing the Collection Elements

In the below code, we have added the list of numbers.

In JavaScript, we access all <li> elements using the getElementByTagName() method, which returns the HTML collection.

After that, we use the for…of loop to traverse each HTML element. The collection contains each HTML element in the object format. We used the innnerHTML property with each element of the collection to get its HTML and print it on the web page.

<DOCTYPE html><html><body><ul><li> One </li><li> Two </li><li> Three </li></ul><div id ="output"></div><script>const output = document.getElementById('output');let lists = document.getElementsByTagName('li');for(let list of lists){
     output.innerHTML +="inner HTML - "+ list.innerHTML +"&lt;br&gt;";}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example: Getting the length of the collection



In the below code, we used the 'length' property of the collection to get the number of elements in the collection.



<DOCTYPE html><html><body><div class="text"> JavaScript </div><div class="text">HTML</div><div class="text">CSS</div><div class="text">CPP</div><div id ="output">The length of the collection is:</div><script>const divs = document.getElementsByClassName('text');
  document.getElementById('output').innerHTML +=" "+ divs.length;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example: Using the namedItem method with collection



In the below code, we access all <div> elements using the getElementByClassName() method, returning the collection of <div> elements.



After that, we used the namedItem() method to access the <div> element having id equal to 'JavaScript'.



<DOCTYPE html><html><body><div class="text" id ="JavaScript"> JavaScript </div><div class="text" id ="PHP">PHP</div><div class="text" id ="Python"> Python </div><div class="text" id ="Java"> Java </div><div id ="output">The Element having id equal to JavaScript is:</div><script>const output = document.getElementById('output');const langs = document.getElementsByClassName('text');
  output.innerHTML += langs.namedItem('JavaScript').innerHTML;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Collections of document Object and DOM Elements



The document object contains some built-in collection to get the elements from the document.



In the below table, we have listed all collections which can be accessed using the document object.



Collection Name
Description
document.links
To get all <a> elements from the document.
document.forms
To get all <form> elements from the document.
document.images
To get all <img> elements from the document.
document.scripts
To get all <script> elements from the document.
document.styleSheets
To get all the document's <link> and <style> elements.
Element.children
To get a collection of all children of the particular HTML element.
element.attributes
To get the collection of all attributes of the given element.
element.options
To get all <options> elements from the document.
element.classList
To get a collection of class names of a particular DOM element.

In JavaScript, with HTML DOM we can navigate the tree nodes using the relationship between the nodes. Each HTML element is represented as a node in the DOM tree. The HTML document object is represented as root node. There are different types of nodes such as root node, parent, child and sibling nodes. The relationship between these nodes help to navigate the DOM tree.

What are DOM Nodes?

When a webpage gets loaded in the browser, it creates a document object. The ‘document’ object is the root of the web page, and you can access other HTML nodes of the web page.

In the HTML DOM, everything is a node.

• The ‘document’ is a parent node of each node.
• Each HTML element is a node.
• The text inside the HTML element is a node.
• All comments inside the HTML are node is the node.

You can access all nodes of the HTML DOM.

Relationship between HTML DOM Nodes

In the HTML DOM, each node has a relationship with other nodes. Each node is present in the hierarchical structure in the DOM tree.

Here are the terms which we will use in this chapter.

• Root node − The document node is a root node.
• Parent node − Each node has a single parent node. The root node doesn’t have any parent node.
• Child node − Each node can have multiple and nested childrenders.
• Sibling node − The sibling nodes are at the same level, having the same parent node.

Let’s understand the relationship between nodes in the below example.

Example

<html><head><title> JavaScrip -DOM Navigation </title></head><body><div><h3> Hi Users!</h3><p> Hello World!</p></div></body></html>

In the above program,

• <html> is a root node, and it doesn’t have a parent node.
• The <html> node contains two child elements: <body> and <head>.
• The <head> element contains the single child element: <title>.
• The <title> node contains the single <text> node.
• The <body> element contains the single child node: <div>.
• The <div> node contains two child nodes: <h2> and <p>.
• <h2> and <p> are siblings.
• The parent of the <h2> and <p> is <div> node.
• The parent of the <div> node is <body> node.

Navigating Between Nodes Using JavaScript

Navigating between nodes means finding the parent, child, sibling, etc. element of a particular element in the DOM tree.

You can use the below methods and properties to navigate between nodes in the DOM tree.

Property	Description
firstChild	To get the first child of the particular node. It can also return the text, comment, etc.
firstElementChild	To get the first child element. For example, <p>, <div>, <img>, etc.
lastChild	To get the last child of the particular node. It can also return the text, comment, etc.
lastElementChild	To get the last child element.
childNodes	To get the node list of all children of the particular element.
children	To get the HTML collection of all children of the particular element.
parentNode	To get the parent node of the HTML element.
parentElement	To get the parent element node of the HTML element.
nextSibling	To get the next node from the same level having the same parent node.
nextElementSibling	To get the next element node from the same level having the same parent node.
previousSibling	To get the previous node from the same level having the same parent node.
previousElementSibling	To get the previous element node from the same level having the same parent node.

Below, we will use each method to navigate through the DOM elements.

Accessing the First Child Element

You can access the particular child element using the firstChild or firstElementChild property.

Syntax

Follow the syntax below to use the ‘firstChild’ and ‘firstElementChild’ properties to access the first child element.

element.firstChild;
element.firstChildElement;

Example

In the below code, <div> element contains the text followed by three <p> elements.

When we use the ‘firstChild’ property, it returns the text node containing the ‘Numbers’ text, and when we use the ‘firstChildElement’ property, it returns the first

element.

<!DOCTYPE html><html><body><div id ="num">Numbers
&lt;p&gt; One &lt;/p&gt;&lt;p&gt; Two &lt;/p&gt;&lt;p&gt; Three &lt;/p&gt;&lt;/div&gt;&lt;div id ="demo"&gt;&lt;/div&gt;&lt;script&gt;const output = document.getElementById('demo');const numbers = document.getElementById('num');// Using the firstChild property
output.innerHTML +="numbers.firstChild: "+ 
numbers.firstChild.textContent.trim()+"&lt;br&gt;";// Using the firstElementChild property
output.innerHTML +="numbers.firstElementChild: "+ numbers.firstElementChild.textContent +"&lt;br&gt;";&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Accessing the Last Child Element



You can use the lastChild or lastChildElement properties to access the last child of the particular HTML node.



Syntax



Follow the syntax below to use the 'lastChild' and 'laststElementChild' properties to access the las=st child element.



element.lastChild;
element.lastChildElement;



Example



In the below code, we have defined the <div> element containing 3 <p> elements containing the name of the programming languages.



In the output, you can see that the lastElementChild property returns the last <p> element, and the lastChild property returns the text node of the div element.



<!DOCTYPE html><html><body><div id ="lang"><p> Java </p><p> JavaScript </p><p>HTML</p>
Programming Languages
  </div><div id ="demo"></div><script>const output = document.getElementById('demo');const langs = document.getElementById('lang');// Using the lastChild property
output.innerHTML +="langs.lastChild: "+ langs.lastChild.textContent.trim()+"&lt;br&gt;";// Using the lastElementChild property
output.innerHTML +="langs.lastElementChild: "+ langs.lastElementChild.textContent +"&lt;br&gt;";&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Accessing all children of HTML Element



You can use the childNodes property to access the node list of all children elements or the children property to access the HTML collection of all children.



Syntax



Follow the syntax below to access all children elements of the DOM element.



element.children;
element.childNodes;



Example



In the below code, we use the childNodes property to access all child nodes of the <div> element.



In the output, you can see that it also returns the text nodes with undefined text as it contains the text nodes after and before each HTML element node.



<!DOCTYPE html><html><body><div id ="lang"><p> Java </p><p> JavaScript </p><p>HTML</p>
  programming Languages
   </div><div id ="output"></div><script>let output = document.getElementById('output');let langs = document.getElementById('lang');
  output.innerHTML +="All children of the div element are - "+"&lt;br&gt;";let allChild = langs.childNodes;for(let i =0; i &lt; allChild.length; i++){
     output.innerHTML += allChild[i].nodeName +" "+ allChild[i].innerHTML +"&lt;br&gt;";}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Accessing the Parent Node of HTML Element



You can use the parentNode property to access the parent node of the particular HTML node.



Syntax



Follow the syntax below to use the parentNode property.



element.parentNode;



Example



In the below code, we access the <li> element having d equal to 'blue' in JavaScript. After that, we use the parentNode property to access the parent node.



It returns the 'UL' node, which we can observe in the output.



<!DOCTYPE html><html><body><ul id ="color"><li id ="blue"> Blue </li><li> Pink </li><li> Red </li></ul><div id ="output">The child node of the color list is:</div><script>const blue = document.getElementById('blue');
  document.getElementById('output').innerHTML += blue.parentNode.nodeName;</script></body></html>



Accessing the Next Sibling Node



The nextSibling property is used to access the next sibling.



Syntax



Follow the syntax below to use the nextSibling property.



element.nextSibling




Example



In the below code, we have access to the <li> element with an id equal to 'apple', and access to the next sibling node using the nextSibling property. It returns the <li> node having the id equal to 'banana'.



<!DOCTYPE html><html><body><ul id ="fruit"><li id ="apple"> Apple </li><li id ="banana"> Banana </li><li id ="watermealon"> Watermealon </li></ul><div id ="output">The next sibling node of the apple node is:</div><script>const apple = document.getElementById('apple');
   document.getElementById('output').innerHTML += apple.nextElementSibling.textContent;</script></body></html>



Accessing the Previous Sibling Node



The previousSibling property is used to access the previous sibling node from the DOM tree.



Syntax



Follow the syntax below to use the previousSibling property.



element.previousSibling;



Example



In the below code, we access the previous sibling of the <li> element with an id equal to 'banana. It returns the <li> element having id equal to 'apple'.



<!DOCTYPE html><html><body><ul id ="fruit"><li id ="apple"> Apple </li><li id ="banana"> Banana </li><li id ="watermealon"> Watermealon </li></ul><div id ="output">The previous sibling node of the banana node is:</div><script>const banana = document.getElementById('banana');
document.getElementById('output').innerHTML += banana.previousElementSibling.textContent;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


DOM Root Nodes



The HTML DOM contains two root nodes.




document.body − It returns the <body> element of the document.



document.documentElement − It returns the entire HTML document.




Example: Using the document.body



<!DOCTYPE html><html><body><div> This is demo!</div><div id="output"></div><script>const output = document.getElementById('output');
output.innerHTML +="The body of the document is: "+ document.body.innerHTML;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example: Using the document.documentElement



<!DOCTYPE html><html><body><h1> Hi, Users!</h1><div id="output"></div><script>const output = document.getElementById('output');
  output.innerHTML +="The full document is "+ document.documentElement.innerHTML;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


DOM nodeName Property



The nodeName property of the HTML DOM element is used to get the name of the node, and it has specifications given below.




It is read−only. You can't modify it.



The value of the nodeName property is equal to the tag name in the upper case.



The node name of the text node is #text.



The node name of the document node is #document.




Syntax



Follow the syntax below to use the nodeName property to get the name of the node.



element.nodeName;



Example



In the below code, we access the <div> element and use the nodeName property. It returns the tag name in the uppercase.



<!DOCTYPE html><html><body><div id ="output"></div><script>const output = document.getElementById('output'); 
output.innerHTML ="The node name of the div node is: "+ output.nodeName;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


DOM nodeValue Property



The nodeValue is used to get the value of the, and it has specifications given below.




It is also a read-only property.



The node value for the text node is the text itself.



The node value for the element nodes is null.




Syntax



Follow the syntax below to use the nodeValue property to get the value of the node.



element.nodeValue;



Example



The <div> element contains some text, and the <p> element in the below code.



The first child element of the <div> element is the text node, and the second child node of the <div> element is the <p> element.



In the output, you can see that when you use the nodeValue property with the text node, it returns the text. Otherwise, it returns null when you use it with the HTML element node.



<!DOCTYPE html><html><body><div id ="num">
Numbers
&lt;p&gt; One &lt;/p&gt;&lt;/div&gt;&lt;div id ="output"&gt;&lt;/div&gt;&lt;script&gt;const output = document.getElementById('output');const num = document.getElementById('num');let child = num.childNodes;
output.innerHTML +="The value of the first child is: "+ child[0].nodeValue +"&lt;br&gt;";
output.innerHTML +="The value of the second child is: "+ child[1].nodeValue +"&lt;br&gt;";&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Types of Node in DOM



Here, we have given different node types in the HTML DOM.



Node
Type
Description
Element Nodes
1
The element nodes can have child nodes, attributes, and text content. For example, <div>, <a>, etc., are element nodes.
Text Nodes
3
The text nodes can have text content inside the node. For example, text inside the <p>, <div>, etc. elements.
Comment Nodes
8
The comment nodes contain the comments.
Document Nodes
9
It represents the entire document.
Document Type Node
10
It represents the type of the document. For example, <!Doctype html>



DOM nodeType Property



The nodeType property returns the type of the node as shown in the above table.



Syntax



Follow the syntax below to use the nodeType property to get the type of the node.



element.nodeType;



Example



In the below code, we use the nodeType property to get the type of the node.



<!DOCTYPE html><html><body><div id ="output"></div><script>const output = document.getElementById('output');
output.innerHTML +="The type of the div node is: "+ output.nodeType;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

The DOM animation can be achieved by changing the DOM element’s style using JavaScript. When changes are gradual and time interval is small, the animation looks continuous. Generally, there are three ways to animate a DOM element:

• Using CSS transitions − It utilizes pre-defined animation styles in CSS triggered by changes in the element’s properties.
• Using CSS animations − It offers more control over animation timing and behavior by defining keyframes and animation properties within the CSS file.
• Using JavaScript − It provides the most flexibility, allowing you to dynamically manipulate style properties and create complex animations directly within your JavaScript code.

This chapter provides a basic understanding of how to animate DOM elements using JavaScript.

Animate DOM Elements with JavaScript

JavaScript can be used to change the style of the DOM element.

You change the style of the DOM element after a particular time frame to animate them. For example, you can use the setInterval() method to change the position of the DOM element to move it from one position to another with animation.

Similarly, you can update CSS properties like animation, etc., to animate the element dynamically.

Furthermore, the requestAnimationFrame() method can also be used to animate the DOM elements.

Below, you will learn different ways to animate the DOM elements.

Animate DOM elements using setInterval() method

You can invoke a setInterval() method after each time frame and change the style of the DOM element to animate them. However, you can keep the time frame small to run animation smoothly.

Syntax

Follow the syntax below to use the setInterval() method to animate DOM elements.

let id =setInterval(frame_func, timeframe);functionframe_func(){if(animation_end){clearInterval(id);}else{// change style to animate}}

In the above syntax, we start the animation using the setInterval() method and call the frame_func() after every timeframe milliseconds.

In the frame_func() function, we have defined the condition to end or continue the animation.

Example

In the below code, we have styled the <div> elements.

When users click the button, it calls the startAnimation() function.

In the startAnimation() function, we have defined the pos variable and initialized it with 0, representing the initial position of the div element.

After that, we used the setInterval() method to invoke the animationFrame() function after every 5 milliseconds.

In the animationFrame() function, if the position of the inner div becomes 350, we stop the animation using the clearInterval() method. Otherwise, we change the left position of the inner div.

When you click the button, it will move the inner div element from left to right.

<!DOCTYPE html><html><head><style>
#parent {
  width:700px;
  height:50px;
  position: relative;
  background: yellow;}
#child {
  width:50px;
  height:50px;
  position: absolute;
  background-color: red;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="parent"&gt;&lt;div id ="child"&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;button onclick ="startAnimation()"&gt; Animate Div  &lt;/button&gt;&lt;script&gt;functionstartAnimation(){const elem = document.getElementById("child");// Starting positionlet pos =0;// Changing frames for animationlet id =setInterval(animationFrame,5);functionanimationFrame(){// Stop the animationif(pos ==350){clearInterval(id);}else{
      pos++;
      elem.style.left = pos +"px";}}}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Example



In the below code, the background color of the <div> element is green.



We use the setInterval() method to call the animationFrame() function after every 50 milliseconds.



In the animationFrame() function, we change the opacity of the <div> element by 0.1. We stop the animation when the opacity becomes less than or equal to 0 using the clearInterval() method.



<!DOCTYPE html><html><head><style>
#parent {
  width:700px;
  height:200px;
  background: green;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="parent"&gt;&lt;/div&gt;&lt;br&gt;&lt;button onclick ="startAnimation()"&gt; Animate Div &lt;/button&gt;&lt;script&gt;functionstartAnimation(){const parent = document.getElementById("parent");let opacity =1;let id =setInterval(animationFrame,50);functionanimationFrame(){if(opacity &lt;=0){// Stop animationclearInterval(id);
      parent.style.opacity =1;
      parent.style.backgroundColor ="red";}else{// Decrease the opacity
      parent.style.opacity = opacity;
      opacity = opacity -0.1;}}}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Animate DOM elements using requestAnimationFrame() method



The requestAnimationFrame() method is used to animate the DOM elements like the setInterval() method. It executes the tasks continuously and repaints the next frame in the browser.



The requestAnimationFrame() method makes rendering more efficient than the setInterval() method.



Syntax



Follow the syntax below to use the requestAnimationFrame() method to animate DOM elements.



functionanimate(){// Animation logic// Request the next animation framerequestAnimationFrame(animate);}// Animation loopanimate();



Lets understand how the requestAnimationFrame() method works.




You pass the callback function as an argument of the requestAnimationFrame() method to execute the next frame.



The web browser will execute the callback before repainting the next frame.



The callback function will update the DOM element.



The browser will repaint the DOM element.



Again, the browser will call the callback function, and the loop will continue.




You can use the cancelAnimationFrame() method to cancel animation.



Example



In the code below, we have defined the startAnimation() and stopAnimation() functions and invoked them when the user clicks the button.



In the startAnimation() function, we increment the value of the pos by 1, and update the left position of the child div element.



After that, we used the requestAnimationFrame() method to paint the next frame in the web browser. It will move the child div element from left to right in the parent div element.



The stopAnimation() function uses the cancelAnimationFrame() method to stop the animation. It takes the id returned by the requestAnimationFrame() method as an argument.



<!DOCTYPE html><html><head><style>
#parent {width:700px; height:50px; position: relative;background: yellow;}
#child {width:50px;height:50px; position: absolute; background-color: red;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="parent"&gt;&lt;div id ="child"&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;&lt;button onclick ="startAnimation()"&gt; Animate Div &lt;/button&gt;&lt;button onclick ="stopAnimation()"&gt; Stop Animation &lt;/button&gt;&lt;script&gt;let animationId;let pos =0;functionstartAnimation(){const elem = document.getElementById("child");functionanimationFrame(){if(pos &lt;650){
      pos++;
      elem.style.left = pos +"px";// Make a call for a next frame
      animationId =requestAnimationFrame(animationFrame);}}// Start AnimationanimationFrame();}functionstopAnimation(){// Stop animationif(animationId){cancelAnimationFrame(animationId);
    animationId =null;}}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Animate DOM Elements by changing the CSS Properties



The animation property of the CSS can be used to add animation to the DOM element. JavaScript also allows the customization of the animation property.



Syntax



Follow the syntax below to animate the DOM element by changing the value of the animation property of the element in JavaScript.



element.style.animation ="key_frame_name duration timing_function iterationCount";



Property values




key_frame_name − It is the name of the keyframe, which you need to define in the CSS.



duration − It is the duration of the animation.



timing_function − It is used to set how animation should be executed.



iterationCount − It specifies how many times the animation should repeat.




Example



In the below code, when users click the button, we call the animateDiv() function and update the value of the animation property of the style object of the div element.



We have already defined the moveAnimation keyframe in CSS. So, when you click the button it will start moving the div element.



<!DOCTYPE html><html><head><style>
#element {
  width:90px;
  height:90px;
  background: blue;
  color: white;
  position: relative;
  text-align: center;}
@keyframes moveAnimation {
  from {
    transform:translateX(0);}
  to {
    transform:translateX(550px);}}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="element"&gt; Animate &lt;/div&gt;&lt;br&gt;&lt;button onclick ="animateDiv()"&gt; Animate Div &lt;/button&gt;&lt;script&gt;functionanimateDiv(){const element = document.getElementById("element");
  element.style.animation ="moveAnimation 3s ease-in-out infinite";}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


The best way to animate the DOM element is using the requestAnimationFrame() method, which animates the DOM element smoothly. Also, it can be used to execute different animations simultaneously.

Changing CSS with JavaScript

JavaScript allows you to change the CSS of the HTML element dynamically.

When HTML gets loaded in the browser, it creates a DOM tree. The DOM tree contains each HTML element in the object format. Furthermore, each HTML element object contains the ‘style‘ object as a property. Here, a ‘style‘ object contains various properties like color, backgroundcolor, etc., to change or get the element’s style.

So, you can use various properties of the ‘style‘ object to change the style of the particular HTML element.

Syntax

Follow the syntax below to change the CSS of the HTML element.

element.style.property = value;

In the above syntax, ‘element’ is an HTML element, which you need to access from the DOM tree. The ‘property’ is a CSS property, and the ‘value’ can be static or dynamic.

For example, you can change an element’s background color or font size by setting the corresponding properties on its Style Object. The best usage of this approach is for implementing dynamic behaviors, such as animations, transitions, and real-time updates to the user interface. Let’s see this in practical −

Welcome to TutorialspointSwitch to DarkSwitch to LightIncrease Font SizeDecrease Font Size

Example: Changing the style of the HTML element

We have applied the initial style to the div element in the code below. In JavaScript, we change the div element’s background color using the style object’s ‘backgroundColor’ property.

<!DOCTYPE html><html><head><style>
div {
  background-color: blue;
  width:700px;
  height:100px;
  color: white;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="square"&gt; Changing the color ofthis Div.&lt;/div&gt;&lt;br&gt;&lt;button onclick="changeColor()"&gt; Change Color &lt;/button&gt;&lt;script&gt;functionchangeColor(){let square = document.getElementById('square');
  square.style.backgroundColor ='red';}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Changing Style of the Element When Event Triggers



You can also change the style of the element when a particular event triggers.



Example



In the below code, we added the 'click' event to the <div> element. When users click the button, it changes the background color of the div element.



<!DOCTYPE html><html><head><style>
div {
  width:700px;
  height:100px;
  color: white;
  background-color: orange;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="square"&gt; Click Me &lt;/div&gt;&lt;br&gt;&lt;script&gt;const square = document.getElementById('square');
square.addEventListener('click',()=&gt;{
  square.style.backgroundColor ='green';
  square.style.fontSize ="25px";});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Changing CSS of HTML elements Dynamically



You can also change the CSS of the HTML element dynamically. You can assign values using the variables.



Example



We have added the default style to the <div> element in the code below.



Also, we have created multiple radio buttons. When users select any radio button, it changes the style of the div element accordingly.



<!DOCTYPE html><html><head><style>
  p {
width:700px;
height:100px;
color: white;
background-color: blue;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;p id ="square"&gt;Select any of the following colors to change the background color&lt;/p&gt;&lt;/div&gt;&lt;div&gt;Yellow:&lt;input type ="radio" id ="yellow" name ="color"&gt;&lt;/div&gt;&lt;div&gt;Green:&lt;input type ="radio" id ="green" name ="color"&gt;&lt;/div&gt;&lt;div&gt;Red:&lt;input type ="radio" id ="red" name ="color"&gt;&lt;/div&gt;&lt;script&gt;let square = document.getElementById('square');//    Changing the style when radio button changeslet colors = document.getElementsByName('color');for(let i =0; i &lt; colors.length; i++){
colors[i].addEventListener('change',function(){
  square.style.backgroundColor =this.id;});}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


List of JavaScript DOM Style Object Properties



Following is a list of properties provided by JavaScript DOM Style Object −



Sr.No
Properties & Description
1
alignContentIt aligns the flexible container's item on the cross-axis or vertical axis when they do not use all available spaces.
2
alignItemsIt sets the default alignment of items inside a flexible container.
3
alignSelfIt sets the default alignment of a single flex item along the cross axis within a flexible container.
4
animationIt define the desired styles.
5
animationDelayIt sets the delay time in seconds or milliseconds after which animation should start.
6
animationDirectionIt sets the direction of animation.
7
animationDurationIt specifies the time it takes for an animation to complete one cycle.
8
animationFillModeIt specifies the style of an element when the animation is not playing, has ended, or contains a delay.
9
animationIterationCountIt sets or returns the number of times an animation should be played.
10
animationNameIt gets or sets the animation name for @keyframes animation.
11
animationTimingFunctionIt specifies the speed curve of an animation.
12
animationPlayStateIt specifies whether an animation is running or paused.
13
backgroundIt sets or returns up to 8 separate background properties of an element.
14
backgroundAttachmentIt sets or returns whether the background image should scroll with the content or remain fixed.
15
backgroundColorIt sets or returns the background color of an element.
16
backgroundImageIt sets or returns the background image of an element.
17
backgroundPositionIt sets or returns the position of the background image of an element.
18
backgroundRepeatIt sets or returns how a background image is to be repeated.
19
backgroundClipIt sets or returns the painting area of the background.
20
backgroundOriginIt sets or returns the relative position of a background image with respect to padding, border, and content.
21
backgroundSizeIt sets or returns the size of the background image.
22
backfaceVisibilityIt specifies whether the element should be visible or not when it's not facing the screen.
23
borderIt sets or returns the border properties of an element.
24
borderBottomIt sets or returns the border-bottom properties of an element.
25
borderBottomColorIt sets or returns the color of the bottom border of an element.
26
borderBottomLeftRadiusIt sets or returns the radius of the bottom border of the left corner.
27
borderBottomRightRadiusIt sets or returns the radius of the bottom border of the right corner.
28
borderBottomStyleIt sets or returns the border-bottom style of an element.
29
borderBottomWidthIt sets or returns the border-bottom width of the element.
30
borderCollapseIt specifies whether table cell elements should have separate borders or share a single border that is collapsed into a single border.
31
borderColorIt sets or returns the border color of an element.
32
borderImageIt sets or returns the border image of an element.
33
borderImageOutsetIt specifies the border image area amount by which it extends beyond the border box.
34
borderImageRepeatIt sets or returns whether the image border should be rounded, repeated, or stretched.
35
borderImageSliceIt specifies the inward offsets of the image border.
36
borderImageSourceIt sets or returns the source of the image to be used as a border image for an element.
37
borderImageWidthIt sets or returns the width of the image border.
38
borderLeftIt sets or returns the left border properties of an element.
39
borderLeftColorIt sets or returns the color of the left border of an element.
40
borderLeftStyleIt sets or returns the left border style of an element.
41
borderLeftWidthIt sets or returns the left border width of the element.
42
borderRadiusIt sets or returns four different border-radius properties.
43
borderRightIt sets or returns the right border properties of an element.
44
borderRightColorIt sets or returns the color of the right border of an element.
45
borderRightStyleIt sets or returns the right border style of an element.
46
borderRightWidthIt sets or returns the right border width of the element.
47
borderSpacingIt sets or returns the space between cells in the table.
48
borderStyleIt sets or returns the border style of an element.
49
borderTopIt sets or returns the top border properties of an element.
50
borderTopColorIt sets or returns the color of the top border of an element.
51
borderTopLeftRadiusIt sets or returns the border radius of the top left corner.
52
borderTopRightRadiusIt sets or returns the border radius of the top right corner.
53
borderTopStyleIt sets or returns the top border style of an element.
54
borderTopWidthIt sets or returns the top border width of the element.
55
borderWidthIt sets or returns the border width of the element.
56
bottomIt sets or returns the bottom position of a positioned element.
57
boxShadowIt sets or gets the shadow around or inside the element's frame.
58
boxSizingIt specifies the way an element's total width and height is calculated.
59
captionSideIt sets or returns the table caption position.
60
caretColorIt sets or gets the cursor color of any editable element, in inputs or areas.
61
clearIt sets or gets the relative position of a specific element with respect to floating objects.
62
clipIt sets or gets the visible part of a positioned element.
63
colorIt sets or gets the text color of the selected element.
64
columnCountIt specifies the number of columns into which an element should be divided.
65
columnFillIt specifies how contents will be arranged in columns when broken into various columns.
66
columnGapIt specifies the gap between the columns.
67
columnRuleIt sets or returns column rule properties.
68
columnRuleColorIt sets or gets the rule color between columns.
69
columnRuleStyleIt sets or gets the rule style between the columns.
70
columnRuleWidthIt sets or gets the rule width between the columns.
71
columnsIt sets the column Width and column Count.
72
columnSpanIt defines the number of columns on which an element should span across.
73
columnWidthIt sets or gets the width of the columns.
74
counterIncrementIt defines the number of counters to be increased on each occurrence of any selector.
75
counterResetIt creates or resets the Counter.
76
cursorIt sets or gets the type of cursor to be displayed for the mouse pointer.
77
directionIt sets or gets the text direction of an element.
78
displayIt sets or returns the display type of an element.
79
emptyCellsIt sets or gets whether to display or not the border and background property of empty cells.
80
filterIt adds filters or visual effects to an image.
81
flexIt sets or gets whether to display or not the border and background property of empty cells.
82
flexBasisIt sets or returns the initial length of a flexible item.
83
flexDirectionIt sets or returns the direction of placement of flex elements.
84
flexFlowIt specifies the direction of the flexible items and flex-wrap specifies whether the flexible items should be wrapped.
85
flexGrowIt specifies the growth of an item relative to the rest of the flexible items inside the same container.
86
flexShrinkIt specifies how much the item will shrink relative to the rest of the flexible items inside the same container.
87
flexWrapIt specifies whether flexible items should be wrapped.
88
cssFloatIt sets or returns the horizontal alignment of an element.
89
fontIt sets or returns font properties.
90
fontFamilyIt sets or returns a list of font-family names and generic-family names for text in an element.
91
fontSizeIt sets or returns the font size of the text.
92
fontStyleIt sets or returns the font style of an element.
93
fontVariantIt sets or returns texts in small and capital letters.
94
fontWeightIt sets or returns the font-weight property which specifies the thickness of characters in a word.
95
fontSizeAdjustIt sets or returns the font aspect value of the text.
96
heightIt sets or returns the height of an element.
97
isolationIt specifies whether an element must create a new stacking content.
98
justifyContentIt sets or returns the alignment of flex items on the main axis or horizontally when they do not use all the available spaces.
99
leftIt sets or returns the left position of a positioned element.
100
letterSpacingIt sets or returns the space between characters of text.
101
lineHeightIt sets or returns the distance between lines in a text.
102
listStyleIt sets or returns the following three properties.
103
listStylePositionIt positions the list item marker.
104
listStyleImageIt sets an image as a list item marker.
105
listStyleTypeIt sets or gets the marker type of list items.
106
marginIt sets or returns the margins of an element.
107
marginBottomIt sets or returns the bottom margin of an element.
108
marginLeftIt sets or returns the left margin of an element.
109
marginRightIt sets or returns the right margin of an element.
110
marginTopIt sets or returns the top margin of an element.
111
maxHeightIt sets or returns the maximum height of an element.
112
maxWidthIt sets or returns the maximum width of an element.
113
minHeightIt sets or returns the minimum height of an element.
114
minWidthIt sets or returns the minimum width of an element.
115
objectFitIt sets or returns how an image or video is to be resized to fit its container.
116
objectPositionIt defines how an image or video should be positioned in its content box.
117
opacityIt sets or returns the opacity level or transparency level of an element where 0 represents completely transparent and 1 represents not transparent at all.
118
orderIt sets or returns the order of the flexible items relative to flex items in the same container.
119
orphansIt sets or returns the minimum number of lines visible at the bottom of the page for an element.
120
outlineIt sets or returns the following three outline properties.
121
outlineColorIt sets or returns the outline color around an element.
122
outlineOffsetIt sets or returns an outline offset and draws it beyond the border edge.
123
outlineStyleIt sets or returns the outline style around an element.
124
outlineWidthIt sets or returns the outline width of the element.
125
overflowIt decides on what to do with the content which does not fit inside the element box.
126
overflowXIt decides what to do with the left and right edges of content if it does not fit inside the element box.
127
overflowYIt decides what to do with the top and bottom edges of content if it does not fit inside the element box.
128
paddingIt sets or returns the padding of an element.
129
paddingBottomIt sets or returns the bottom padding of an element.
130
paddingLeftIt sets or returns the left padding of an element.
131
paddingRightIt sets or returns the right padding of an element.
132
paddingTopIt sets or returns the top padding of an element.
133
pageBreakAfterIt sets or returns the page break behavior after an element during print or print preview.
134
pageBreakBeforeIt sets or returns the page break behavior before an element during print or print preview.
135
pageBreakInsideIt sets or returns page break behavior inside an element during print or print preview.
136
perspectiveIt specifies the distance that, how far an element is placed from the z=0 plane to provide a 3D view of an element.
137
perspectiveOriginIt sets the position of a 3D element using the x-axis and y-axis.
138
positionIt sets or returns the type of positioning method used on any element.
139
quotesIt sets or returns the type of quotation marks for embedded quotations.
140
resizeIt specifies whether a user can resize or change the height and width of an element or not.
141
rightIt sets or returns the right position of a positioned element including padding, scrollbar, border, and margin.
142
scrollBehaviorIt specifies a smooth scroll effect instead of scrolling instantly when the user clicks on a link within the scrollable box.
143
tableLayoutIt sets or returns the way table cells, rows, and columns are laid out in an HTML document.
144
tabSizeIt sets or returns the length of the space used for the tab character.
145
textAlignIt sets or returns the horizontal alignment of text content inside the block-level element.
146
textAlignLastIt sets or returns the alignment of the last line of text.
147
textDecorationIt sets the textDecorationLine, textDecorationStyle, and the textDecorationColor properties.
148
textDecorationColorIt sets or returns the color of text decoration like overline, underline, and line-through.
149
textDecorationLineIt specifies the type of line the decoration will have.
150
textDecorationStyleIt sets or returns the style of text decoration line like it can be displayed as solid, dashed, dotted, or wavy.
151
textIndentIt sets or returns the indentation of the first line of text.
152
textOverflowIt specifies the behavior of text when it overflows the containing element.
153
textShadowIt sets or returns one or more text-shadow effects.
154
textTransformIt sets or returns the capitalization of text.
155
topIt sets or returns the top position of apositionedelement including margin, border, padding, and scrollbar.
156
transformIt applies a 2D or 3D transformation to transform the object.
157
transformOriginIt allows the user to change the position of transformed elements.
158
transformStyleIt specifies whether child elements are positioned in 3D space or flattened with respect to the plane of the parent element.
159
transitionIt adds an animation-like effect while changing the CSS property of any block-level element when hovered over it.
160
transitionDelayIt sets or returns the delay time in seconds or milliseconds after which the transition effect will start.
161
transitionDurationIt sets or returns the amount of time in seconds or milliseconds, that a transition effect takes to complete.
162
transitionPropertyIt specifies the CSS property name on which the transition effect will be applied.
163
transitionTimingFunctionIt sets or returns the speed curve of the transition effect.
164
unicodeBidiIt specifies how bidirectional text in a document is displayed.
165
userSelectIt sets or returns whether the text can be selected by the user or not.
166
verticalAlignIt sets or returns the vertical alignment of the content in an element.
167
visibilityIt sets or returns whether an element should be visible or not.
168
whiteSpaceIt sets or returns the way how whitespaces are being handled in a text.
169
widthIt sets or returns the width of an element.
170
windowIt sets or returns the minimum number of lines visible at the top of the page for an element.
171
wordBreakIt specifies how words should break when they reach at end of the line except for CJK (Chinese, Japanese, and Korean) scripts.
172
wordSpacingIt sets or returns spacing between words of the sentences.
173
wordWrapIt sets or returns whether long words should be broken to wrap onto the next line.
174
zIndexIt sets the z-order of a positioned element.

Changing HTML with JavaScript

The HTML DOM allows us to change the HTML elements with JavaScript. You can customize or dynamically update the HTML elements using the various methods and properties. For example, you can change the content of the HTML element, remove or add new HTML elements to the web page, change a particular element’s attribute’s value, etc.

In JavaScript, we can access the HTML elements using id, attribute, tag name, class name, etc. After accessing the elements, we can change, manipulate them using the properties such as innerHTML, outerHTML, etc. and methods such as replaceWith(), appendChild() etc.

Changing HTML Using innerHTML Property

The innerHTML property of the HTML property is used to replace the HTML content of the element or add new HTML elements as children of the current element.

Syntax

Follow the syntax below to use the innerHTML property to change the HTML.

element.innerHTML = HTML_str;

In the above syntax, ‘element’ is an HTML element accessed in JavaScript, and HTML_str is an HTML in the string format.

Example

In the example below, we replace the HTML content of the div element using the innerHTML property. You can click the button to replace the HTML content in the output.

<html><body><div id ="text"><p> One </p><p> Two </p></div><button onclick ="changeHTML()"> Change HTML</button><script>functionchangeHTML(){let text = document.getElementById('text');
     text.innerHTML =&amp;lt;div&amp;gt; JavaScript &amp;lt;/div&amp;gt; &amp;lt;div&amp;gt; HTML &amp;lt;/div&amp;gt; &amp;lt;div&amp;gt; CSS &amp;lt;/div&amp;gt;;}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Changing HTML Using outerHTML Property



The outerHTML property of the HTML element replaces the HTML of the element, including the tags.



Syntax



Follow the syntax below to use the outerHTML property.



element.outerHTML = HTML_str;



The HTML_str is an HTML content in the string format.



Example



In the below code, we replace the <div> element with the <img> element when users click the button using the outerHTML property.



<html><body><div id ="text"><p> Paragraph One </p><p> Paragraph Two </p></div><p></p><button onclick ="changeHTML()"> Change HTML</button><script>functionchangeHTML(){let text = document.getElementById('text');
     text.outerHTML =&amp;lt;img src="https://www.tutorialspoint.com/static/images/logo.png?v3" alt="Logo"&amp;gt;;}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Replacing HTML Element Using replaceWith() Method



The replaceWIth() method replaces the particular HTML element with a new element.



Syntax



Follow the syntax below to use the replaceWith() method to change the HTML.



Old_lement.replaceChild(new_ele);



You need to take the existing element as a reference of the replaceChild() method and pass the new element as an argument.



Example



In the below code, we used the createElement() method to create a new <p> element. After that, we added the HTML into that.



Next, we have replaced the div element with the new element in the changeHTML() function.



<html><body><div id ="text">Hello World!</div><button onclick ="changeHTML()"> Change HTML</button><script>functionchangeHTML(){const text = document.getElementById('text');const textNode = document.createElement('p');
     textNode.innerHTML ="Welcome to the Tutorialspoint!";// Using the replaceWith() method
     text.replaceWith(textNode);}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Changing Value of HTML Element's Attribute



You can access the HTML element and set its value in JavaScript.



Syntax



Follow the syntax below to change the value of the HTML element's attribute.



element.attribute = new_value;



Here, 'attribute' is needed to replace the HTML attribute. The 'new_value' is a new value of the HTML attribute.



Example



In the below code, we change the value of the 'src' attribute of the <img> element. When you click the button, it will change the image.



<html><body><img src ="https://www.tutorialspoint.com/static/images/logo.png?v3" width ="300px" id ="logoImg" alt ="logo"><p></p><button onclick="changeURL()"> Change URLof Image </button><script>functionchangeURL(){
     document.getElementById('logoImg').src ="https://www.tutorialspoint.com/static/images/simply-easy-learning.png";}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Adding a New Element to the HTML Element



You can use the appendChild() method to add a new HTML child to the particular HTML element.



Syntax



Follow the syntax below to add a new element using the appendCHild() method.



element.appendChild(new_ele);



You need to use the parent element as a reference of the appendChild() method and pass the new element as an argument.



Example



In the below code, we append the <p> Apple <p> as a child of the <div> element.



<html><body><div id ="fruits"><p> Banana </p><p> Watermelon </p></div><button onclick ="AddFruit()"> Add Apple </button><script>functionAddFruit(){const fruits = document.getElementById("fruits");const p = document.createElement("p");
     p.innerHTML ="Apple";
     fruits.appendChild(p);// Using the appendChild() method}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Removing a Child Element from the HTML Element



You can use the removeChild() method to remove the child element from the particular HTML element.



Syntax



Follow the syntax below to use the removeChild() method.



element.removeChild(child_ele)



You need to use the HTML element as a reference of the removeChild() method when you need to remove the child element and pass the child element as an argument.



Example



In the below code, we remove the <p> Apple <p> from the <div> element.



<html><body><div id ="fruits"><p> Banana </p><p> Watermelon </p><p> Apple </p></div><button onclick ="removeFruit()"> Remove Apple </button><script>functionremoveFruit(){const fruits = document.getElementById("fruits");const apple = fruits.children[2];
    fruits.removeChild(apple);}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


Using the document.write() Method



The document.write() method replaces the whole content of the web page and writes a new HTML.



Syntax



Follow the syntax below to use the document.write() method.



document.write(HTML);



The document.write() method takes an HTML in the string format as a parameter.



Example



In the below code, we replace the content of the whole web page using the document.write() method.



<html><body><div id ="fruits"><p> Banana </p><p> WaterMealon </p><p> Apple </p></div><button onclick="replaceContent()"> Replace content </button><script>functionreplaceContent(){
     document.write("Hello World");}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>


For more practice, you may try to change the first child element, last child element, other attributes, etc. of the HTML elements.