HTML DOM의 Aside 객체는 HTML 문서 내 <aside> 요소를 나타냅니다. <aside> 태그는 본문 내용과 간접적으로 관련된 콘텐츠, 예를 들어 사이드바, 참고 사항, 용어 설명 등을 마크업할 때 사용되며, 자바스크립트를 통해 이 요소에 동적으로 접근하고 조작할 수 있습니다.
Aside 객체 생성 문법
자바스크립트에서 aside 객체를 새로 생성하려면 document.createElement() 메서드를 사용합니다. 기본 문법은 다음과 같습니다.
document.createElement("ASIDE");이 메서드는 지정한 태그 이름에 해당하는 새로운 요소 노드를 반환하며, 생성된 요소는 appendChild() 등을 통해 문서에 추가해야 실제 화면에 나타납니다.
예제: 버튼 클릭으로 aside 요소 동적 생성하기
아래 예제는 버튼을 클릭하면 aside 객체를 생성하고, 그 안에 제목(h3)과 단락(p) 요소를 포함시켜 페이지에 추가하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
background-color: #fff;
color: #0197F6;
}
h1 {
color: #23CE6B;
}
.btn {
background-color: #fff;
border: 2px solid #0197F6;
height: 2rem;
width: 40%;
margin: 2rem auto;
display: block;
color: #0197F6;
outline: none;
cursor: pointer;
border-radius: 20px;
}
aside {
border: 1.5px solid #db133a;
padding: 20px;
}
</style>
<body>
<h1>DOM aside Object Demo</h1>
<button onclick="createAside()" class="btn">Create a aside object</button>
<script>
function createAside() {
var asideElement = document.createElement("ASIDE");
asideElement.innerHTML = 'I\'m an aside element<h3>This is a h3 element inside an aside element</h3><p>This is a paragraph element inside an aside element</p>';
document.body.appendChild(asideElement);
}
</script>
</body>
</html>코드 설명
createAside() 함수가 호출되면 document.createElement("ASIDE")로 새로운 aside 요소를 만들고, innerHTML 속성을 사용해 내부에 텍스트와 h3, p 요소를 삽입합니다. 마지막으로 document.body.appendChild()를 호출해 해당 요소를 body 끝에 추가함으로써 화면에 렌더링됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 표시됩니다.
화면 중앙의 "Create a aside object" 버튼을 클릭하면, 빨간색 테두리를 가진 aside 요소가 동적으로 생성되어 페이지 하단에 추가되는 것을 확인할 수 있습니다.
