1.다음 중 DOM 객체는?
(1)window 객체
(2)navigator 객체
(3)event 객체
(4)html 객체
2.다음 중 DOM 객체가 아닌 것은?
(1)p 객체
(2)document 객체
(3)div 객체
(4)span 객체
DOM(Document Object Model): HTML문서의 각 요소를 객체화한 것
이때, DOM 트리의 루트는 document객체지만, document객체는 DOM객체가 아님에 주의할 것!
3.HTML DOM 트리에 대해 잘못 말한 것은?
(1)브라우저에 의해 만들어진다.
얼핏 브라우저가 HTML페이지를 읽으면서 HTML 태그를 화면에 바로 출력하는 것으로 생각할 수 있지만, 사실은 브라우저가 HTML 태그로부터 DOM 객체를 생성하고 DOM 객체를 구성한후, DOM 객체를 화면에 출력한 것이다.
(2)HTML 문서가 로드되면 만들어진다.
(3)HTML 태그의 포함 관계에 의해 DOM 객체들 사이에 부모 자식 관계가 형성된다.
(4)DOM 트리에서 DOM 객체를 찾는 기능은 window.getElementById()이다.
document.getElementById()
4.브라우저가 HTML DOM트리를 만드는 목적은 무엇인가?
DOM객체를 통해서 HTML 태그가 출력된 모양과 콘텐츠를 제어하기 위해서이다.
5.다음은 웹 페이지에 작성된 <div id="myADiv">...</div> 태그를 찾는 자바스크립트 코드이다.
var obj = document.getElementById("myDiv");이 <div> 태그의 모양을 제어하기 위해서 잘못 사용된 것은?
(1)obj.style.zIndex=4;
(2)obj.style.backgroundcolor="red";
② obj.style.backgroundcolor = "red"; 설명) 바르게 고치면 obj.style.backgroundColor = "red"; 이다
(3)obj.style.margin="10px";
(4)obj.style.fontSize="10px";
6.다음 중 document 객체의 메소드 이름이 잘못된 것은?
(1)getElementById()
(2)getElementByTagName()
getElementByTagName()->getElementsByTagName()
(3)writeIn()
write() 후 '\n' 추가 출력. '\n'의 효과는 빈칸 하나에 불과
(4)getElementsByClassName()
7.다음 웹 페이지에 대해 물음에 답하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li onclick="alert(this.innerHTML)"><span>라면</span>과 스프를 넣는다.</li>
<li>5분 후 먹는다.</li>
</ol>
</body>
</html>7-1.라인 9의 <li> 태그에 의해 생성된 DOM객체의 innerHTML 프로퍼티 값은 무엇인가?(웹 페이지를 출력하고 라인 9를 클릭하면 확인해 볼 수 있다.)
<span>라면</span>과 스프를 넣는다.
7-2.라인 7의 <ol type="A" onclick="alert(this.innerHTML)">로 수정하여 웹 페이즈를 출력하고 라인 8이나 10 위체에 클릭하면 무엇이 출력되는가?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A" onclick="alert(this.innerHTML)">
<li>물을 끓인다.</li>
<li><span>라면</span>과 스프를 넣는다.</li>
<li>5분 후 먹는다.</li>
</ol>
</body>
</html><li>물을 끓인다.</li>
<li onclick="alert(this.innerHTML)"><span>라면</span>과 스프를 넣는다.</li>
<li>5분 후 먹는다.</li>
8.다음 웹 페이지를 로드하면 경고창이 출력되는가? 답에 대한 이유를 설명하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>자바스크립트 테스트</title>
<script>
var elem = document.getElementById("myBody");
if(elem==null)
alert("body is not made yet");
</script>
</head>
<body id="myBody">
<p id="first">hello</p>
</body>
</html>경고창이 출력된다.
모든 태그는 위에서 아래 방향으로, 좌에서 우 방향으로 처리가 된다. 그런데 아직 < body> 태그가 브라우저에 의해 읽혀지기 전이고, id 값이 myBody인 body 객체가 만들어지기 전이어서 getElementById()는 null을 리턴하게 되기 때문이다.
9.HTML 페이지에 다음 태그가 작성되어 있을 때,
<div id="myDiv"></div>다음 코드를 작성하여 <div>태그가 출력되는 영역에 "<span>hello</span>"을 삽입하여 hello를 출력시키고자 한다. 빈칸을 완성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
var span = document.createElement("span");
span.innerHTML = "hello";
div.appendChild(span);
</script>
</body>
</html>'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]11장 연습문제 (0) | 2021.11.21 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 연습문제 (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]8장 OpenChallenge (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]9장 OpenChallenge (0) | 2021.11.21 |
| [HTML5+CSS3+Javascript 웹프로그래밍]10장 OpenChallenge (0) | 2021.11.21 |