HTML DOM에서 Nav 객체는 HTML 문서 내의 <nav> 요소를 대표하는 객체입니다. <nav> 요소는 웹 페이지의 주요 내비게이션(탐색) 링크 영역을 의미론적으로 감싸는 역할을 하며, 자바스크립트를 통해 동적으로 생성하고 제어할 수 있습니다.
HTML DOM Nav 객체란?
브라우저가 HTML 문서를 파싱하면 각 요소는 DOM 트리의 노드로 변환됩니다. 이때 <nav> 태그도 하나의 객체로 표현되며, document.createElement("NAV") 메서드를 사용하면 런타임에 새로운 내비게이션 요소를 만들어 문서에 추가할 수 있습니다.
아래 예제는 사용자가 입력한 링크 이름을 받아 <nav> 요소와 그 안에 앵커(<a>) 요소를 동적으로 생성하는 방법을 보여줍니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Nav</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Nav</legend>
<div id="navbar"></div>
<input type="text" id="textSelect" placeholder="링크 이름 입력...">
<input type="button" value="내비게이션 바 만들기" onclick="createNAV()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
var navDiv = document.getElementById("navbar");
function createNAV() {
if(textSelect.value !== ''){
textSelect.disabled = true;
var navObject = document.createElement("NAV");
navDiv.appendChild(navObject);
var aElement = document.createElement("A");
aElement.setAttribute("href", "#");
var textNode = document.createTextNode(textSelect.value);
aElement.appendChild(textNode);
navObject.appendChild(aElement);
}
else
divDisplay.textContent = '링크 이름을 입력해 주세요';
}
</script>
</body>
</html>
코드 동작 방식
위 코드의 핵심 로직은 다음과 같습니다.
- 입력값 검증: 텍스트 입력창이 비어 있으면 "링크 이름을 입력해 주세요"라는 안내 메시지를 화면에 표시합니다.
- NAV 요소 생성:
document.createElement("NAV")로 새로운 내비게이션 객체를 만들고, 미리 준비된#navbardiv에 추가합니다. - 앵커 요소 추가:
<a>요소를 생성해href속성을 설정한 뒤, 사용자가 입력한 텍스트를 텍스트 노드로 만들어 자식으로 붙입니다. - 입력 잠금: 링크가 한 번 생성되면 입력창을 비활성화하여 중복 생성을 방지합니다.
실행 결과
입력창이 비어 있는 상태에서 '내비게이션 바 만들기' 버튼을 클릭하면 아래와 같이 안내 메시지가 출력됩니다.
입력창에 값이 있는 상태에서 버튼을 클릭하면, 입력한 링크 이름을 포함한 새로운 내비게이션 바가 화면에 생성됩니다.
정리
HTML DOM의 Nav 객체를 활용하면 사용자 인터랙션에 반응하는 동적 내비게이션 UI를 손쉽게 구현할 수 있습니다. createElement(), appendChild(), createTextNode(), setAttribute() 같은 기본 DOM 조작 메서드만 익혀두면 다양한 웹 컴포넌트를 직접 만들어 볼 수 있습니다.