The normalize() method in HTML is used to merge the adjacent text nodes with the first text node and flush out the empty nodes. The normalize() method does not require any parameters.
Syntax
node.normalize()Example 1: In this example, we will use the normalize() method.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM normalize Method
</title>
</head>
<body onload="normalizeNode()" style="text-align:center">
<h1>GeeksforGeeks</h1>
<h2>DOM normalize() Method</h2>
<button onclick="normalizeNode()">
Normalize
</button>
<button onclick="addNode()">
Add node
</button>
<p>There are <span id="count"></span> child nodes.</p>
<!--Driver Code Ends-->
<script>
// onload is used to reset the child text nodes
// count when page is refreshed and addNode
// function is used for addNode button
function addNode() {
// Creating a text node named "Normalize"
let textNode =
document.createTextNode("Normalize ");
// Using variable text_body to
//access the whole body
let text_body = document.body;
// Adding text node to the end of the body
text_body.appendChild(textNode);
// Count is used to store number of child text
// nodes present in the document
let text_node =
document.getElementById("count");
// innerHTML fetches value of text_node and
// update it with new value.
text_node.innerHTML =
text_body.childNodes.length;
}
// normalizeNode function is used to Normalize button
function normalizeNode() {
document.normalize();
let text_body = document.body;
let node_count =
document.getElementById("count");
node_count.innerHTML =
text_body.childNodes.length;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- Merges adjacent text nodes : If multiple text nodes sit next to each other (e.g., after several appendChild or insertBefore operations), normalize() combines them into one clean text node.
- Removes empty text nodes : Any text nodes that contain no content are automatically deleted during normalization, helping keep the DOM clean.
