Chapter_9 Example
control_attribute.html
control_body.html
control_html.html
control_style.html
control_text.html
dom_correct.html
dom_event.html
dom_fault.html
dom_process.html
event_default.html
event_inline.html
event_inlineWithScript.html
event_object.html
event_tradition.html
reference_eventOrigin.html
reference_ieEventObject.html
reference_useOfEventObject.html
select_all.html
select_id.html
select_query.html
control_attribute.html
Full Screen
<!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>
control_body.html
Run
<!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'); alert(dataCustom); }; </script> </head> <body> </body> </html>
control_html.html
Full Screen
<!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.innerHTML = output; }; </script> </head> <body> </body> </html>
control_style.html
Full Screen
<!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>
control_text.html
Full Screen
<!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>
dom_correct.html
Full Screen
<!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>
dom_event.html
Full Screen
<!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>
dom_fault.html
Run
<!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>
dom_process.html
Run
<!DOCTYPE html> <html> <head> <title>Document Object Model</title> <script>alert('Process - 0')</script> </head> <body> <h1>Process - 1</h1> <script>alert('Process - 2')</script> <h2>Process - 2</h2> <script>alert('Process - 3')</script> </body> </html>
event_default.html
Full Screen
<!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>
event_inline.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Event Basic</title> </head> <body> <button onclick="alert('click')">버튼</button> </body> </html>
event_inlineWithScript.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Inline Event</title> <script> function buttonClick() { alert('click'); } </script> </head> <body> <button onclick="buttonClick()">버튼</button> </body> </html>
event_object.html
Run
<!DOCTYPE html> <html> <head> <title>Event Object</title> <script> window.onload = function (event) { alert(event); }; </script> </head> <body> </body> </html>
event_tradition.html
Full Screen
<!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>
reference_eventOrigin.html
Full Screen
<!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>
reference_ieEventObject.html
Run
<!DOCTYPE html> <html> <head> <title>IE Event Object</title> <script> window.onload = function () { alert(window.event); }; </script> </head> <body> </body> </html>
reference_useOfEventObject.html
Full Screen
<!DOCTYPE html> <html> <head> <title>Event Object</title> <script> window.onload = function (e) { // 변수 e가 있으면 e를 넣고 없으면 window.event를 넣습니다. var event = e || window.event; }; </script> </head> <body> </body> </html>
select_all.html
Full Screen
<!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>
select_id.html
Full Screen
<!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>
select_query.html
Full Screen
<!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>