HTML DOM normalize() 메서드는 지정된 노드에서 빈 텍스트 노드(empty Text Node)를 제거하고, 서로 인접해 있는 텍스트 노드들을 하나로 병합하는 기능을 수행합니다.
DOM을 동적으로 조작하다 보면 createTextNode(), appendChild() 같은 메서드를 통해 여러 개의 텍스트 노드가 만들어집니다. 화면에는 하나의 연속된 문자열처럼 보여도, 실제 DOM 트리에서는 이것들이 개별 노드로 분리되어 존재합니다. 이때 normalize()를 호출하면 인접한 텍스트 노드가 단일 노드로 합쳐지고, 내용이 없는 빈 노드는 삭제되어 DOM 구조가 깔끔하게 정리됩니다.
문법(Syntax)
메서드를 호출하는 기본 문법은 다음과 같습니다.
document.normalize()
document 객체뿐만 아니라 특정 요소 노드에 대해서도 호출할 수 있습니다.
element.normalize()
주요 특징
- 대상 노드의 하위 트리에서 빈 텍스트 노드를 제거합니다.
- 인접한 텍스트 노드들을 하나로 병합하여 노드 수를 줄입니다.
- 반환값은 없으며, 대상 노드의 자식 노드 구조를 직접 변경합니다.
childNodes.length로 노드 개수를 세거나 노드를 탐색할 때 일관성 있는 결과를 얻는 데 유용합니다.
예제
아래 예제에서는 입력창에 값을 넣고 버튼을 클릭해 텍스트 노드를 직접 생성한 뒤, Normalize 버튼을 눌렀을 때 노드가 어떻게 정리되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM normalize()</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-normalize( )</legend>
<input type="text" id="textSelect" placeholder="type here...">
<input type="button" onclick="makeTextNode()" value="Create Text Node">
<input type="button" onclick="normalizeDocument()" value="Normalize">
<div id="appendedNodes">All Text Nodes: </div>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
var appendedNodesDiv = document.getElementById("appendedNodes");
divDisplay.textContent = 'Total Text Nodes: '+appendedNodesDiv.childNodes.length;
function makeTextNode() {
var textNode = document.createTextNode(textSelect.value);
appendedNodesDiv.appendChild(textNode);
if(textSelect.value === '')
divDisplay.textContent = 'Empty Text Node Created';
else
divDisplay.textContent = 'Text Node Created with value: '+textSelect.value;
divDisplay.textContent += ', Total Text Nodes: '+appendedNodesDiv.childNodes.length;
}
function normalizeDocument() {
appendedNodesDiv.normalize();
divDisplay.textContent = 'Total Text Nodes: '+appendedNodesDiv.childNodes.length;
}
</script>
</body>
</html>
실행 결과
버튼 클릭 전 − 초기 상태에서는 텍스트 노드가 존재하지 않습니다.
입력값 없이 'Create Text Node' 버튼 클릭 시 − 빈 텍스트 노드가 생성되며, 총 텍스트 노드 수가 증가합니다.
입력값이 있을 때 'Create Text Node' 버튼 클릭 시 − 입력한 값으로 새로운 텍스트 노드가 추가됩니다.
'Normalize' 버튼 클릭 시 − 빈 텍스트 노드가 제거되고 인접한 텍스트 노드들이 하나로 병합되어, 총 텍스트 노드 수가 감소합니다.
'Normalize' 버튼 클릭 후 − 정리된 DOM 트리에서는 각 텍스트 조각이 더 이상 분리된 노드가 아닌, 하나의 통합된 텍스트 노드로 관리됩니다.
