HTML DOM의 nodeValue 속성은 해당 노드의 값을 나타내는 문자열을 반환하거나 새로운 값을 설정할 때 사용하는 속성입니다. 텍스트 노드나 주석 노드의 내용을 읽고 수정하는 데 유용하게 활용됩니다.
nodeValue 속성 문법
노드의 문자열 값을 반환할 때 사용하는 문법은 다음과 같습니다.
Node.nodeValue
노드의 종류에 따라 반환되는 값은 아래와 같이 달라집니다.
- 문서 노드(document) 및 요소 노드(element) : 항상 'null'을 반환
- 속성 노드(attribute) : 해당 속성의 '값(value)'을 반환
- 텍스트 노드(text) 및 주석 노드(comment) : 노드의 실제 내용(content)을 반환
노드에 새로운 문자열 값을 설정하려면 다음 문법을 사용합니다.
Node.nodeValue = string
참고: 공백(whitespace) 역시 하나의 텍스트 노드로 취급된다는 점을 기억해 두세요.
HTML DOM nodeValue 예제
아래 예제에서는 학생 명단(<li> 요소)의 텍스트 노드 값을 nodeValue로 확인하여, 특정 학생('Bina')이 목록에 있는지 검사하고 그 결과를 화면에 출력합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nodeValue</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ul{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-nodeValue</legend>
<h3>Students</h3>
<ul>
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ul>
<input type="button" onclick="checkForBina()" value="Confirm for Bina">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementsByTagName("li");
var status = 'not Present';
function checkForBina() {
for(var i=0; i<studentList.length; i++){
if(studentList[i].childNodes[0].nodeValue === 'Bina')
status = 'Present';
}
divDisplay.textContent = 'Bina is '+status;
}
</script>
</body>
</html>
실행 결과
'Confirm for Bina' 버튼을 클릭하기 전 화면입니다.
버튼을 클릭한 후에는 자바스크립트가 각 <li> 요소의 첫 번째 자식 노드(텍스트 노드)의 nodeValue를 순회하며 'Bina'와 일치하는지 비교하고, 결과를 div 영역에 출력합니다.
