메뉴 건너뛰기

2020.05.14 01:47

Image 객체

조회 수 125 댓글 2

<!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() 객체만 그런건지??

?
  • ?
    관리자 2020.05.14 11:36
    좋은 질문입니다.
    1. 현재 new Image()로 생성한 객체가 한 개 뿐이지요.
    2. 하나의 DOM 객체는 당연히 여러 부모를 가질 수 없습니다. 이렇게 된다면 Image 객체는 누구의 자식일까요? 그리고 화면의 어디에 출력될까요? 당연히 한 부모의 자식입니다.
    그래서 DOM 객체의 부모를 옮기면 원래 부모에서 떨어져 나와 새로운 부모의 자식이 됩니다.
    3. Image 객체 뿐아니라 모든 DOM 객체도 동일합니다.

    지금 이 질문은 자바나 C#, C/C++ 등 다른 프로그램을 작성할 떄도 동일하게 만날 수 있는 문제이라서 좋은 질문이라고 하는 겁니다.
  • ?
    ㅇㅇ 2020.05.15 00:47
    감사합니다!!! 단번에 이해했습니다
    답변 감사합니다~~~!~!!

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18175
362 4장 171쪽 2 chu 2022.04.04 54
361 html5 태그 검사 2 열공이 2022.03.10 94
360 2장 실습문제 1번 질문드립니다! 1 망나뇽 2022.03.06 166
359 안녕하세요 관리자님 실습 문제 짝수본 zip 파일은 제공 되지 않는 건가요? 1 문의 2022.02.25 208
358 r/w는 무슨 뜻인가요? 1 ㅇㅁㅇㅈ 2021.12.22 386
357 웹 워커 13-7 결과 55가 출력되지 않습니다. 1 chg115 2021.12.03 101
356 연습문제의 미디어 파일 1 부산 2021.11.25 132
355 document.getElementBy~ 2 tc0712 2021.11.22 108
354 윈도우 브라우저와 윈도우 탭 2 tc0712 2021.11.22 57
353 5장 내용 중 궁금한 점 있습니다! 1 file 2021.10.15 212
352 5장 5-(2) 질문 있습니다! 1 2021.10.14 116
351 form 태그와 웹서버 1 tc0712 2021.09.29 103
350 HTML5+CSS3+Javascript 웹 프로그래밍[수정판] 4 file Jenny 2021.09.25 514
349 웹서버와 클라이언트 2 tc0712 2021.09.14 95
348 URL 과 IP 주소 2 tc0712 2021.09.14 120
347 태그와 속성 2 tc0712 2021.09.08 72
346 캔버스 관련 질문 1 원그리기 2021.08.22 101
345 웹 사이트 접속 질문 있습니다. 1 초심자 2021.08.21 131
344 질문 있습니다. 2 2021.08.19 134
343 몽구스 웹서버가 작동 안됩니다. 바울 2021.07.22 147
목록
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로