nodeName 속성이란?
자바스크립트에서 nodeName 속성은 특정 노드(node)의 이름을 반환하는 데 사용되는 읽기 전용(read-only) 속성입니다. HTML 문서 내에서 이 속성을 활용하면 해당 노드가 어떤 종류인지 쉽게 파악할 수 있습니다.
노드 유형에 따라 nodeName 속성이 반환하는 값은 다음과 같습니다.
- 요소(Element) 노드: 태그 이름을 대문자로 반환 (예: H1, P, DIV)
- 텍스트(Text) 노드: '#text' 반환
- 속성(Attribute) 노드: 속성 이름 반환
- 문서(Document) 노드: '#document' 반환
nodeName 속성 구현 예제
다음 코드를 실행하면 nodeName 속성이 실제로 어떤 값을 반환하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Tutorials</h1>
<p id="id2">Demo Content</p>
<p id="id3"></p>
<p id="id4"></p>
<script>
document.getElementById("id3").innerHTML = document.getElementById("id1").nodeName;
document.getElementById("id4").innerHTML = document.getElementById("id2").nodeName;
</script>
</body>
</html>실행 결과
위 예제를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- h1 요소(id1)의 nodeName → H1
- p 요소(id2)의 nodeName → P
결과에서 알 수 있듯이, HTML 문서에서 요소 노드의 nodeName 속성은 항상 태그 이름을 대문자로 반환합니다. 따라서 nodeName 속성으로 노드를 비교할 때는 대소문자 차이에 유의해야 하며, 필요하다면 toLowerCase() 메서드를 함께 사용하는 것이 안전합니다.