| <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
| <html>
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
| <title></title>
|
| <style>
|
| body{
|
| font-size:9pt;
|
|
|
| }
|
|
|
| div{
|
| border: 1px solid #999999;
|
| margin:20px;
|
| margin-bottom:20px;
|
| }
|
| div div{
|
| border: 1px dotted #CCC;
|
|
|
| }
|
|
|
| .active{
|
| font-size:20pt;
|
| color:#090;
|
| border:5px solid #ff0000;
|
| }
|
| </style>
|
| <script>
|
| window.onload=function(){
|
| solveM1();
|
| solveM2();
|
| solveM3();
|
| solveM4();
|
| solveM5();
|
| solveM6();
|
| }
|
|
|
| function solveM1(){
|
| var m = document.getElementById('m_1');
|
| m.style.color='red';
|
| }
|
|
|
| function solveM2(){
|
| var m = document.getElementById('m_2');
|
| m.setAttribute("class","active");
|
| }
|
|
|
| function solveM3(){
|
| var m = document.getElementById('m_3');
|
| var imgimg = document.getElementById('imgimg');
|
| imgimg.setAttribute('src', './images/navi.jpg')
|
|
|
|
|
| }
|
|
|
| function solveM4(){
|
| var m = document.getElementById('m_4');
|
| var output ='';
|
| output += '<p>';
|
| output += '항목4';
|
| output += '</p>';
|
|
|
| m.innerHTML += output;
|
| }
|
|
|
| function solveM5(){
|
| var m = document.getElementById('m_5');
|
| var p1 = document.getElementById('p1');
|
|
|
| m.removeChild(p1);
|
| }
|
|
|
| function solveM6(){
|
| var m = document.getElementById('test6');
|
| test6.parentNode.removeChild(m);
|
|
|
| }
|
| </script>
|
| </head>
|
|
|
| <body>
|
| <div>
|
| <h4>테스트1</h4>
|
| <div id="m_1">
|
| #m_1 : 글자색을 빨간색으로 변경해주세요.
|
| </div>
|
| </div>
|
| <div>
|
| <h4>테스트2</h4>
|
| <div id="m_2">
|
| #m_2 : 클래스 active를 적용시켜 주세요.
|
| </div>
|
| </div>
|
| <div>
|
| <h4>테스트3</h4>
|
| <div id="m_3">
|
| #m_3 : 에고 이 이미지가 아닌데... 이미지를 ch3.png로 변경해주세요"<br>
|
| <img src="ch2.png" id="imgimg">
|
| </div>
|
| </div>
|
| <div>
|
| <h4>테스트4</h4>
|
| <div id="m_4">
|
| #m_ 4 : 홋! 항목4까지 있어야 하는건데, 바쁜나머지 실수를 했군요. 항목4를 제일 뒤에 추가해주시겠어요?
|
| <p>
|
| 항목1
|
| </p>
|
| <p>
|
| 항목2
|
| </p>
|
| <p>
|
| 항목3
|
| </p>
|
|
|
| </div>
|
| </div>
|
| <div>
|
| <h4>테스트5</h4>
|
| <div id="m_5">
|
| #m_ 5 : 이번에는 항목4가 더 추가되었네요. 즉시 삭제해주세요.
|
| <p>
|
| 항목1
|
| </p>
|
| <p id="p1">
|
| 항목4
|
| </p>
|
| <p>
|
| 항목2
|
| </p>
|
| </div>
|
| </div>
|
| <div id="test6">
|
| <h4>테스트6</h4>
|
| <div id="m_6">
|
| #m_ 6 : 이런이런! 이 부분은 전혀 필요없는 내용들인데 왜 있는거죠? #m_6부터 헤더태그까지 모두 삭제해주세요.
|
| <p>
|
| DOM(Document Object Model)이란?<br>
|
| 웹페이지 문서를 조작하기 위해서 지켜야될 약속(interface)만 딸랑 적혀있는 문서랍니다.
|
| 약속만 있을뿐 내부는 텅빈 상자랍니다.
|
| 우리가 알고있는 W3C DOM에는 구현소스가 한줄도 존재하지 않습니다.
|
| 그럼 실제 구현소스는??
|
| </p>
|
| </div>
|
| </div>
|
| </body>
|
| </html>
|
|
