<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
img {
height: 50px;
width: 50px;
margin: 0px;
}
table {
border-collapse: collapse;
border: 1px solid blue;
padding: 0px;
}
td {
border: 1px solid blue;
width: 50px;
height: 50px;
padding: 0px;
}
</style>
</head>
<body onload="load()">
<h3>마우스 클릭 연습</h3>
<hr />
<script>
document.write("<table>");
for (var i = 0; i < 100; i++) {
if (i / 10 == 0) {
document.write("<tr>")
}
document.write("<td id='td" + i + "'>");
document.write("</td>");
if (i % 10 == 9) {
document.write("</tr>");
}
}
document.write("</table>");
function load() {
var img = new Image();
img.src = "banana.jpg";
img.onload = function () {
img.width = "50px";
img.height = "50px";
}
img.onclick = function () {
var ran = Math.floor(Math.random() * 100);
var td = document.getElementById("td" + ran);
td.appendChild(img);
}
var ran = Math.floor(Math.random() * 100);
var td = document.getElementById("td" + ran);
td.appendChild(img);
}
</script>
</body>
</html>
09 오픈 첼린지 문제를 위와 같이 풀었습니다.
푸는 도중에 의문이 생겼습니다.
원래 의도는 Image 객체를 클릭하면 해당 td의 자식 객체를 removeChild로 없애준 후에 랜덤으로 다른 td에 자식을 더해주려고 했습니다. (onclick 에 리스너 등록한 부분)
근데 없애지 않았는데도 이미지를 클릭하면 원래 있던 자리에서 다른 자리로 그냥 옮겨가더군요.
1. new Image()로 생성시킨 객체는 한 DOM 객체에만 사용할 수 있어서 다른 객체에 부여하면 옮겨가는 건가요??
2. 만약 그렇다면 자바스크립트로 생성시킨 객체들은 모두 한 DOM 객체에만 사용할 수 있는지 아니면 new Image() 객체만 그런건지??
1. 현재 new Image()로 생성한 객체가 한 개 뿐이지요.
2. 하나의 DOM 객체는 당연히 여러 부모를 가질 수 없습니다. 이렇게 된다면 Image 객체는 누구의 자식일까요? 그리고 화면의 어디에 출력될까요? 당연히 한 부모의 자식입니다.
그래서 DOM 객체의 부모를 옮기면 원래 부모에서 떨어져 나와 새로운 부모의 자식이 됩니다.
3. Image 객체 뿐아니라 모든 DOM 객체도 동일합니다.
지금 이 질문은 자바나 C#, C/C++ 등 다른 프로그램을 작성할 떄도 동일하게 만날 수 있는 문제이라서 좋은 질문이라고 하는 겁니다.