실습문제 8-1
WEB/TRAINNING 2017. 11. 24. 09:55 |1. 다음은 HTML 페이지와 브라우저의 출력 결과이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <title>라면을 끓이는 순서</title> </head> <body> <h3>라면을 끓이는 순서</h3> <hr> <ol type="A"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분후 <strong>맛있게</strong> 먹는다.</li> </ol> <script> // 이곳에 자바스크립트를 작성하라. </script> </body> </html> | cs |
(1) HTML 페이지의 HTML DOM 트리를 그려라
(2) </ol>와 </body> 태그 사이에 다음과 같이 자바스크립트 코드를 작성하여 모든 <li> 태그를 찾아 글자 색을 green으로 출력하라.
(document.getElementsByTagName("li")메소드를 이용할것)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <title>라면을 끓이는 순서</title> </head> <body> <h3>라면을 끓이는 순서</h3> <hr> <ol type="A"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분후 <strong>맛있게</strong> 먹는다.</li> </ol> <script> var liArr = document.getElementsByTagName("li"); for(var i=0 ; i<liArr.length ; i++) { var li = liArr[i]; li.style.color = "green"; } </script> </body> </html> | cs |
(3) 리스트가 출력된 공간 아무 곳이나 클릭하면 리스트 전체의 배경색을 yellowgreen으로 바꾸는 자바스크립트 코드를 작성하라.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <title>라면을 끓이는 순서</title> </head> <body> <h3>라면을 끓이는 순서</h3> <hr> <ol type="A" onclick="this.style.backgroundColor='yellowgreen'"> <li>물을 끓인다.</li> <li>라면과 스프를 넣는다.</li> <li>파를 썰어 넣는다.</li> <li>5분후 <strong>맛있게</strong> 먹는다.</li> </ol> </script> </body> </html> | cs |