DOM이란 Document Object Model 의 약자로서 "문서객체모델" 이다.
CSS가 웹페이지의 스타일 변경을 한다고 하면, DOM은 웹페이지를 동적으로 움직일수 있게 도와준다고 생각하면 된다.
그러나 DOM만 있다고 해서 웹페이를 동적으로 만들수 있는것은 아니고, Javascript등의 제어를 통해서 동적으로 만들수 있다.
getElementById() 메소드는 특정 아이디를 가진 요소 노드에 직접 접근할수 있다. 대소문자를 구분하므로 반드시 getElementById 로 적어야 한다.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DOM과 Javascript 를 사용한 간단한 Show, Hide</title>
<style>
* {
font-size:12px;
font-weight:bold;
}
#mainmenu {
cursor:hand;
color:red;
}
#submenu {
color:pink;
display:block; // 속성을 block대신 none를 쓰면 공간도 없어진다.
visibility:hidden; // 처음 로드되었을 때 보이지 않게 한다.
}
</style>
<script>
// 간단한 함수를 만든다. body에서 온클릭를 하면 함수가 실행된다.
function showHide(aaa,bbb) {
var aaaa = document.getElementById(aaa); // 웹문서에서 ID 가 aaa,bbb 인요소를 가져와서
var bbbb = document.getElementById(bbb); // 변수 aaaa, bbbb 에 넣는다.
if(!aaaa) return;
if(aaaa.style.visibility == 'visible') {
aaaa.style.display = 'block'; //
aaaa.style.visibility = 'hidden';
} else {
aaaa.style.display = 'block';
aaaa.style.visibility = 'visible';
}
}
</script>
</head>
<body>
<div id="mainmenu" onClick="showHide('submenu','mainmenu')">
메인메뉴
</div>
<div id="submenu">
서브메뉴1 | 서브메뉴2 | 서브메뉴3 | 서브메뉴4 | 서브메뉴5
</div>
여기부터는 내용입니다.
</body>
</html>
2개의 DIV 태그에 각각 아이디를 부여하고 그 아이디를 getElementById 메소드로 접근해서 해당 스타일 속성을 바꾼다. 만약 CSS의 속정중에서 display 속성을 none 로 하고 서브메뉴를 hidden으로 했을 경우에는 서브메뉴의 공간이 사라지므로 메인메뉴와 내용의 간격이 사라진다.
'Web > Dom' 카테고리의 다른 글
| DOM 사용 가능 여부 확인하기 (0) | 2008.03.23 |
|---|---|
| DOM - getElementsByTagName (0) | 2008.03.23 |