HTML DOM의 nodeName 속성은 해당 노드의 이름에 해당하는 문자열을 반환합니다. 이 속성은 읽기 전용이며, DOM 트리를 탐색하거나 디버깅할 때 노드의 유형과 이름을 빠르게 파악하는 데 매우 유용합니다.
문법(Syntax)
Node.nodeName
반환되는 값은 노드의 유형에 따라 다음과 같이 달라집니다.
- 요소 노드(Element Node) : 대문자 태그 이름 (예: BODY, INPUT)
- 속성 노드(Attribute Node) : 해당 속성의 이름
- 주석 노드(Comment Node) : '#comment'
- 문서 노드(Document Node) : '#document'
- 텍스트 노드(Text Node) : '#text'
참고: HTML 소스 코드 안의 공백(whitespace) 역시 하나의 텍스트 노드로 취급됩니다.
예제
아래 예제는 nodeName 속성을 활용하여 body 요소, input 요소, 주석 노드의 이름을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nodeName</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-nodeName</legend>
<label for="example">Example site: </label>
<input id="urlSelect" type="url" name="urlAddress" value="https://www.example.com" disabled>
<input type="button" onclick="getNodeNames()" value="Get all names">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var urlSelect = document.getElementById("urlSelect");
// 주석 노드를 생성한 뒤 input 요소의 자식으로 추가
var commentNode = document.createComment("My Example URL");
urlSelect.appendChild(commentNode);
var divDisplay = document.getElementById("divDisplay");
function getNodeNames() {
// 각 노드의 nodeName 값을 화면에 출력
divDisplay.textContent = 'Body: '+document.body.nodeName;
divDisplay.textContent += ' & input: '+urlSelect.nodeName;
divDisplay.textContent += ' & comment: '+commentNode.nodeName;
}
</script>
</body>
</html>
실행 결과
'Get all names' 버튼을 클릭하기 전의 화면입니다.
버튼을 클릭하면 body, input, 주석 노드의 nodeName 값이 아래와 같이 div 영역에 표시됩니다.
