JavaScript HTML DOM의 nodeValue 속성이란 무엇인가?

JavaScript에서 nodeValue 속성은 특정 노드의 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하려면 값을 읽어올 대상 노드를 반드시 지정해야 합니다.

nodeValue 속성의 기본 개념

DOM 트리를 구성하는 각 노드는 종류에 따라 서로 다른 값을 가집니다.

텍스트 노드(Text Node): 실제 텍스트 내용을 반환합니다.
속성 노드(Attribute Node): 해당 속성의 값을 반환합니다.
요소 노드(Element Node): 항상 null을 반환합니다.

따라서 요소의 텍스트 내용을 얻고 싶다면, 요소 자체가 아닌 그 하위의 텍스트 노드에 접근해야 한다는 점에 유의해야 합니다.

사용 예제

다음 코드를 실행하면 버튼 요소의 텍스트 노드 값을 가져오는 방법을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <p>노드 값 가져오기</p>
      <button>데모 버튼 텍스트</button>
      <script>
         var val = document.getElementsByTagName("BUTTON")[0];
         var res = val.childNodes[0].nodeValue;
         document.write("<br>Node Value: " + res);
      </script>
   </body>
</html>

코드 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

document.getElementsByTagName("BUTTON")[0]를 통해 문서에서 첫 번째 <button> 요소를 선택합니다.
val.childNodes[0]로 해당 버튼의 첫 번째 자식 노드, 즉 텍스트 노드에 접근합니다.
.nodeValue를 호출하여 텍스트 노드의 실제 문자열 값을 반환받습니다.
document.write()를 사용해 결과를 화면에 출력합니다.

참고 사항

현대적인 웹 개발에서는 document.write() 대신 textContent나 innerHTML 속성을 사용하는 것이 권장됩니다. 또한 childNodes는 공백과 줄바꿈도 텍스트 노드로 취급하므로, 정확한 텍스트만 다루려면 children 컬렉션이나 firstElementChild 속성을 함께 고려하는 것이 좋습니다.