문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다.
동적으로 HTML 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단으로, 같은 코드가 여러 브라우저에서 동일하게 동작하도록 설립된 표준입니다.
JavaScript에서 제어 대상(문서 객체)를 찾기 위해서 몇 가지 함수를 제공합니다.
적절한 제어 대상을 정하고 함수 호출을 하면 객체를 반환하게 되는데, 이 객체의 속성과 메소드를 통해 자바스크립트에서 문서를 동적으로 처리할 수 있습니다.
| 함수 이름 | 요약 | 반환값 | IE 지원 |
|---|---|---|---|
getElementById
|
id 속성으로 검색 |
객체(한개) | IE 7+ |
getElementsByClassName
|
class 속성으로 검색 |
배열(여러개) | IE 9+ |
getElementsByTagName
|
태그 이름으로 검색 | 배열(여러개) | IE 7+ |
querySelector |
jQuery-유사 셀렉터 | 객체(한개) | IE 8+ |
querySelectorAll |
jQuery-유사 셀렉터 | 배열(여러개) | IE 8+ |
위 함수들은 글로벌 함수가 아닌 객체 모델에서 사용할 수 있는 함수입니다.
즉, getElementById 함수로 이미 찾은 객체 내부에서 다시 getElementsByClassName 함수를 사용하는 식이죠.
문서 전체에서 객체를 찾을 시에는 document 전역 변수를 사용합니다.
querySelector 함수와 querySelectorAll 함수는 jQuery 강의를 참고 바랍니다.
var mytext1 = document.getElementById('mytext1');
var containers = document.getElementsByClassName('container');
var images = document.getElementsByTagName('img');
var mytext1_1 = document.querySelector('#mytext1');
var containers = document.querySelector('.container');
<input id="mytext1" type="text">
<script type="text/javascript">
var myText1 = document.getElementById('mytext1');
myText1.value = Math.random();
</script>
<input class="rand-text" type="text">
<input class="rand-text" type="text">
<input class="rand-text" type="text">
<script type="text/javascript">
var randTexts = document.getElementsByClassName('rand-text');
for (var i = 0; i < randTexts.length; i++)
randTexts[i].value = Math.random();
</script>
<select id="my-selector">
<option></option>
<option></option>
<option></option>
</select>
<script type="text/javascript">
var mySelector = document.getElementById('my-selector');
var mOptions = mySelector.getElementsByTagName('option');
for (var i = 0; i < mOptions.length; i++)
mOptions[i].innerHTML = Math.round(Math.random() * 10000);
</script>
querySelector를 이용해 찾은 객체에서 몇 가지 속성을 통해 DOM을 제어할 수 있습니다.
대표적으로 value 속성을 사용하면 HTML태그의 value 속성을 지정하는 것과 같은 효과를 냅니다.
태그마다 사용할 수 있는 속성은 다르며 공통적이며 자주 사용되는 속성으로는 아래가 있습니다.
속성설명예시
| id | id값 | if (myBox.id == “my-box”) |
| className | class값 | myBox.className = “box red-box” |
| tagName | 태그의 이름 | if (myBox.tagName == “div”) |
| value | value값 | nameInputArea = “홍길동” |
| style | style 오브젝트 | myBox.style.color = “red” |
| innerHTML | 태그 내부 HTML값 | myBox.innerHTML = “ok” |
태그마다 특징적인 속성은 바로 제어할 수 있습니다. <a> 태그의 경우 href 속성을 사용할 수 있죠.
하지만 사용자가 임의로 태그에 속성을 부여하거나, 임의로 부여된 속성에 접근하기 위해서는 메소드를 통해 접근해야합니다.
아래 4개 메소드를 사용하여 사용자 정의 속성을 제어할 수 있습니다.
예제
var user = document.getElementById("user");
var monster = document.getElementById("monster");
user.setAttribute("HP", 100);
user.style.left = "50px";
if (parseInt(user.style.left) < parseInt(monster.style.left))
user.setAttribute("HP", user.getAttribute("HP") - 10);
QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 할 수 있습니다.
<html>
<head>
<script type= "text/javascript">
function innerHTMLTest(){
var randValNode = document.getElementById("rand-val");
randValNode.innerHTML = "<b><font color='red'>"+Math.random()+"</font></b>";
}
</script>
</head>
<body>
<div id="rand-val">Let's generate random Value</div>
<button onclick="innerHTMLTest()">Generate</button>
</body>
</html>
innerHTML과 비슷하지만, 선택된 노드를 포함하여 HTML를 수정합니다.
HTML 코드가 그대로 입력되지 않으며, 텍스트로 입력됩니다.
<script type="text/javascript">
function innerTextTest(target) {
target.innerText = '<strong>click</strong>';
}
</script>
<button onclick="innerTextTest(this)">Click This</button>
HTML문자열을 그대로 삽입하는 방법 대신 createElement 등의 함수로 도큐먼트 객체를 만들고 insertBefore 등의 함수로 노드 객체 안에 다른 노드 객체를 삽입하며
객체지향처럼 사용하는 방법도 있습니다.
HTML에서 style 속성을 이용하면 CSS의 속성을 태그에 직접 설정할 수 있었습니다.
JavaScript에서도 비슷하게 QuerySelector로 가져온 노드에서 style속성을 참조하며 CSS 속성을 적용시킬 수 있습니다.
CSS에서 여러 단어로 이어진 속성은 -로 구분되었는데(ex. background-color), JavaScript에서는 -를 사용하지 않고 다음 단어를 대문자로 사용하며(Camel Case)
접근합니다. (ex. backgroundColor)
var box = document.getElementById("box");
box.style.backgroundColor = "red";
<html>
<head>
<script type="text/javascript">
function changeColor() {
var box = document.getElementById("box");
var r = parseInt(Math.random() * 256);
var g = parseInt(Math.random() * 256);
var b = parseInt(Math.random() * 256);
box.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}
</script>
<style>
#box{
cursor: pointer;
width:80px;
height:80px;
background-color:#ccc;
}
</style>
</head>
<body>
<div>click to change color</div>
<div id="box" onclick="changeColor()"></div>
</body>
</html>
JavaScript는 하나의 기업에서 혼자 만들고, 혼자 사용 환경까지 배포해주는 언어가 아닙니다.
표준과 규약이 있고 빠르게 발전하고 있기는 하지만 규약이 제대로 정해지기 전 나왔던 구형 브라우저 (Internet Explorer 9 이하)에서는 JavaScript 함수를 지원하지 않는 것이 있어 코드가 제대로 동작하지 않는 경우도
많습니다.
jQuery는, 이런 브라우저 호환성을 해결하고 자주 사용하는 코드를 재사용할 수 있도록 만들어진 라이브러리입니다.
상당히 많은 웹사이트가 현재도 jQuery를 사용하고 있습니다.
이 강의에서 상세하게 다루진 않을 예정이며, JavaScript 작업이 많이 필요한 홈페이지에는 jQuery 사용을 권장드립니다.
var spans = $('span'); // 태그이름이 div인 객체 찾기
var box = $('#my-box'); // id가 'my-box'인 객체 찾기
var cb = $('.common-button'); // class가 'common-button'인 객체 찾기
box.html('<strong>content</strong>'); // innerHTML 속성 유사 함수
box.css('background-color', '#ff3300'); // css 적용 (style 속성 유사)
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).ready(function () {
var box = $('#box');
box.on('click', function () {
box.css('width', box.innerWidth() + 20 + 'px');
box.css('height', box.innerHeight() + 20 + 'px');
});
});
</script>
<style>
#box{
cursor: pointer;
width:80px;
height:80px;
background-color:#666;
}
</style>
</head>
<body>
<div>click to exapand</div>
<div id="box"></div>
</body>
</html>