HTML DOM에서 Address 객체는 문서 내의 <address> 요소를 나타내는 데 사용됩니다. 이 객체를 활용하면 JavaScript로 동적으로 주소 정보를 담은 요소를 생성하거나 조작할 수 있습니다.
Address 객체란?
<address> 요소는 일반적으로 웹 페이지에서 작성자나 소유자의 연락처 정보를 표시할 때 사용됩니다. DOM의 createElement() 메서드를 사용하면 런타임에 새로운 address 요소를 만들어 문서에 추가할 수 있습니다.
예제
다음 예제는 버튼을 클릭하면 새로운 <address> 요소를 생성하여 화면에 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<h2>Heading Two</h2>
<p>Create address element</p>
<button onclick="display()">Display</button>
<script>
function display() {
var a = document.createElement("Address");
var node = document.createTextNode("ABC Inc, P 120, Ontario, Canada");
a.appendChild(node);
document.body.appendChild(a);
}
</script>
</body>
</html>코드 설명
document.createElement("Address"): 새로운<address>요소를 생성합니다.document.createTextNode(): 화면에 표시할 주소 텍스트 노드를 만듭니다.appendChild(node): 생성한 텍스트 노드를 address 요소의 자식으로 추가합니다.document.body.appendChild(a): 완성된 address 요소를 문서 본문(body)에 추가하여 화면에 렌더링합니다.
실행 결과
위 코드를 실행하면 초기 화면에는 제목과 버튼만 표시됩니다.
이제 Display 버튼을 클릭하면 다음과 같이 주소가 화면에 출력되는 것을 확인할 수 있습니다.
정리
HTML DOM의 Address 객체를 사용하면 <address> 요소를 자유롭게 생성하고 제어할 수 있습니다. 이 방법은 연락처 정보를 동적으로 삽입해야 하는 상황에서 유용하게 활용됩니다.