IT Cookbook, HTML5 프로그래밍 입문 (3판)

10장 문서 객체 모델

이번 장에서 alert() 함수를 사용하는 예제 일부는 원활한 사이트 사용을 위해 document.write()로 대체되었습니다.

기본 예제 10-1 실행 순서에 따른 문서 객체 사용 오류

337페이지

코드 10-2 dom_fault.html
<!DOCTYPE html>
<html data-rint="alert()">
<head>
    <title>Document Object Model</title>
    <script>
        // h1 태그의 배경 색상을 변경합니다.
        document.querySelector('h1').style.backgroundColor = 'red';

        // h2 태그의 글자 색상을 변경합니다.
        document.querySelector('h2').style.color = 'red';
    </script>
</head>
<body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
</body>
</html>
코드 10-3 dom_correct.html
<!DOCTYPE html>
<html>
<head>
    <title>Document Object Model</title>
</head>
<body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
    <script>
        // h1 태그의 배경 색상을 변경합니다.
        document.querySelector('h1').style.backgroundColor = 'red';

        // h2 태그의 글자 색상을 변경합니다.
        document.querySelector('h2').style.color = 'red';
    </script>
</body>
</html>
코드 10-4 dom_event.html
<!DOCTYPE html>
<html>
<head>
    <title>Document Object Model</title>
    <script>
        window.onload = function () {
            // h1 태그의 배경 색상을 변경합니다.
            document.querySelector('h1').style.backgroundColor = 'red';

            // h2 태그의 글자 색상을 변경합니다.
            document.querySelector('h2').style.color = 'red';
        };
    </script>
</head>
<body>
    <h1>Process - 1</h1>
    <h2>Process - 2</h2>
</body>
</html>

기본 예제 10-2 문서 객체 선택

341페이지

코드 10-6 select_id.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 선택합니다.
            var header = document.getElementById('header');

            // 문서 객체를 조작합니다.
            header.style.color = 'orange';
            header.style.background = 'red';
            header.innerHTML = 'From JavaScript';
        };
    </script>
</head>
<body>
    <h1 id="header">Header</h1>
</body>
</html>
코드 10-7 select_query.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 선택합니다.
            var header = document.querySelector('h1');

            // 문서 객체를 조작합니다.
            header.style.color = 'orange';
            header.style.background = 'red';
            header.innerHTML = 'From JavaScript';
        };
    </script>
</head>
<body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
</body>
</html>
코드 10-8 select_all.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 선택합니다.
            var headers = document.querySelectorAll('h1');

            for (var i = 0; i < headers.length; i++) {
                // 변수를 선언합니다.
                var header = headers[i];

                // 문서 객체를 조작합니다.
                header.style.color = 'orange';
                header.style.background = 'red';
                header.innerHTML = 'From JavaScript';
            }
        };
    </script>
</head>
<body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
</body>
</html>

기본 예제 10-3 내부 글자 변경

347페이지

코드 10-9 control_text.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 변수를 선언합니다.
            var output = '';
            for (var i = 0; i < 10; i++) {
                output += '<h1>Header - ' + i + '</h1>';
            }

            // 문서 객체 내부의 글자를 변경합니다.
            document.body.textContent = output;
        };
    </script>
</head>
<body>
    
</body>
</html>

기본 예제 10-4 스타일 조작

349페이지

코드 10-10 control_style.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 추가합니다.
            var output = '';
            for (var i = 0; i < 256; i++) {
                output += '<div></div>';
            }
            document.body.innerHTML = output;

            // 문서 객체를 선택합니다.
            var divs = document.querySelectorAll('div');
            for (var i = 0; i < divs.length; i++) {
                // 변수를 선언합니다.
                var div = divs[i];

                // 스타일을 적용합니다.
                div.style.height = '2px';
                div.style.background = 'rgb(' + i + ',' + i + ',' + i + ')';
            }
        };
    </script>
</head>
<body>
    
</body>
</html>

기본 예제 10-5 문서 객체 속성 조작

352페이지

코드 10-11 control_attribute.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 변수를 선언합니다.
            var image = document.getElementById('image');

            // 속성을 변경합니다.
            image.src = 'http://placehold.it/300x200';
            image.width = 300;
            image.height = 200;
        };
    </script>
</head>
<body>
    <img id="image">
</body>
</html>
코드 10-11 control_body.html
<!DOCTYPE html>
<html>
<head>
    <title>DOM Basic</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 속성을 지정합니다.
            document.body.setAttribute('data-custom', 'value');

            // 속성을 추출합니다.
            var dataCustom = document.body.getAttribute('data-custom');
            document.write(dataCustom);
        };
    </script>
</head>
<body>

</body>
</html>

기본 예제 10-6 문서 객체를 사용한 시간 표시

354페이지

코드 10-13 dom_clock.html
<!DOCTYPE html>
<html>	
	<head>
		<title>Clock</title>
		<script>
			// 이벤트를 연결합니다.
			window.onload = function () {
				// 변수를 선언합니다.
				var clock = document.getElementById('clock');

				// 1초마다 함수를 실행합니다.
				setInterval(function () {
					var now = new Date();
					clock.innerHTML = now.toString();

				}, 1000);
			};
		</script>
	</head>
	<body>
		<h1 id="clock"></h1>
	</body>
</html>

기본 예제 10-7 이벤트 연결

357페이지

코드 10-14 event_inline.html
<!DOCTYPE html>
<html>
<head>
    <title>Event Basic</title>
</head>
<body>
    <button onclick="alert('click')">버튼</button>
</body>
</html>
코드 10-15 event_inlineWithScript.html
<!DOCTYPE html>
<html>
<head>
    <title>Inline Event</title>
    <script>
        function buttonClick() {
            alert('click');
        }
    </script>
</head>
<body>
    <button onclick="buttonClick()">버튼</button>
</body>
</html>

기본 예제 10-8 고전 이벤트 모델

385페이지

코드 10-16 event_tradition.html
<!DOCTYPE html>
<html>
<head>
    <title>Traditional Event</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 선택합니다.
            var button = document.getElementById('button');

            // 이벤트를 연결합니다.
            button.onclick = function () {
                alert('click');
            };
        };
    </script>
</head>
<body>
    <button id="button">버튼</button>
</body>
</html>

이벤트 발생 객체

359페이지

코드 10-17 reference_eventOrigin.html
<!DOCTYPE html>
<html>
<head>
    <title>Traditional Event</title>
</head>
<body>
    <button id="button">버튼 - </button>
    <script>
        // 이벤트를 연결합니다.
        document.getElementById('button').onclick = function () {
            this.textContent = this.textContent + '★';
        };
    </script>
</body>
</html>

기본 예제 10-9 이벤트 정보

360페이지

코드 10-18 event_object.html
<!DOCTYPE html>
<html>
<head>
    <title>Event Object</title>
    <script>
        window.onload = function (event) {
            document.write(event);
        };
    </script>
</head>
<body>

</body>
</html>

기본 예제 10-10 기본 이벤트 제거

361페이지

코드 10-19 event_default.html
<!DOCTYPE html>
<html>
<head>
    <title>Traditional Event - Default Event</title>
    <script>
        // 이벤트를 연결합니다.
        window.onload = function () {
            // 문서 객체를 선택합니다.
            var button = document.getElementById('button');

            // 이벤트를 연결합니다.
            button.onclick = function () {
                // 기본 이벤트를 제거합니다.
                return false;
            };
        };
    </script>
</head>
<body>
    <a id="button" href="http://hanb.co.kr">버튼</a>
</body>
</html>

← 11장 →