메뉴 건너뛰기

Home
2017.04.05 16:15

8장 연습문제 8번

은성
조회 수 1361 댓글 5

<script>
var elem = document.getElementById("myBody");
        if(elem == null) alert("body is not made yet");
</script>
</head>
<body id="myBody">

 

부분에서 경고문이 출력되는데

getElementById로 "myBody"(본문에 body)에 대한 객체를 찾지만,

객체가 아직 생성되기 전이기 때문에

elem ==NULL 이되어서

경고가 출력되는 건가요 ?

 

위로 아래로 댓글로 가기 수정 삭제
?
에디터 사용하기 닫기
Comments '5'
  • ?
    황기태 2017.04.05 18:19

    그렇습니다. 잘하는군요.
    브라우저가 HTML 파일을 읽어 DOM 객체를 만들어가는 과정에서 자바스크립트 코드가 실행됩니다.
    그런데 아직 < body> 태그가 브라우저에 의해 읽혀지기 전이고 id 값이 myBody인 body 객체가 만들어지기 전이어서
    getElementById()는 null을 리턴하게 됩니다.

    이 문제를 낸 의도는 자바스크립트 코드의 위치와 실행 과정을 잘 알지 못하면 오류에 빠질 수 있음을 알려주려고 만든 것입니다.

    수정 삭제 댓글
  • ?
    은성 2017.04.05 18:41
    감사합니다! 완벽하게 이해 되었습니다!
    수정 삭제 댓글
  • ?
    은성 2017.04.05 18:44
    그런데 한가지 의문이 듭니다.
    <script>는 어디에나 존재할 수 있다고 배웠습니다.
    body안에도 작성이 가능하구요.

    html은 순서대로 로드하는데,
    만약에 스크립트 코드가 body 안에 있다면 어떻게 되나요?
    그때도 우선순위는 script가 먼저 가지나요 ?
    수정 삭제 댓글
  • profile
    관리자 2017.04.05 18:54
    그건 제가 답변해드리겠습니다.
    모든 태그는 위에서 아래 방향으로, 좌에서 우 방향으로 처리가 됩니다.

    아래와 같이 <body> 태그가 구성되어 있다고 생각해봅시다.

    <body>
    <script>
    var test = document.getElementById("test");

    test.style.backgroundColor = "blue";
    </script>

    <div id="test">
    Test
    </div>
    </body>

    이 경우 <script> 태그 내부에서 찾고자 하는 태그인 <div>태그가 <script> 태그보다 나중에 등장하므로 ,
    document.getElementById("test")는 null을 반환하게 되고 <div> 태그의 배경색은 변하지 않습니다.

    이때 순서를 반대로 해서
    <body>
    <div id="test">
    Test
    </div>

    <script>
    var test = document.getElementById("test");

    test.style.backgroundColor = "blue";
    </script>
    </body>
    와 같이 작성하게 되면, <div> 태그의 배경색이 정상적으로 바뀌는 것을 확인할 수 있습니다. ^^
    댓글
  • ?
    은성 2017.04.05 18:58
    가지고 있던 의문이 해소되어서 다행입니다!
    코드작성순서도 분명 영향을 끼친다는 거군요!
    감사합니다!!
    수정 삭제 댓글

QnA

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

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18273
223 3장 실습문제 5번문제에 대해 질문이있습니다. 1 CHUL 2020.04.09 221
222 비정형 표 질문 file ㅇㅇ 2020.04.08 193
221 ; 가 쓰일 때를 여쭙고 싶습니다 2 file 입문한 사람 2020.04.07 141
220 따옴표를 4중 5중으로 사용하는 방법에 대해 여쭙고 싶습니다. 입문한 사람 2020.04.07 40
219 SRC와 SRDOC의 차이를 여쭙고 싶습니다. 입문한 사람 2020.04.07 48
218 선생님 정말 고맙습니다 재질문도 드리고 싶습니다 file 입문한 사람 2020.04.07 137
217 표와 div span 4 키보드 향기 2020.04.05 109
216 목록을 한줄로 나란하게 만드는 법 질문드립니다 3 file 입문한 사람 2020.04.04 260
215 div 와 pre 중에서 어떤 게 더 상위에 위치하나요? 1 file 입문한사람 2020.04.03 751
214 코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1 file 입문한 사람 2020.04.01 607
213 ; 에 대해 질문드립니다 1 입문한 사람 2020.04.01 85
212 2장 오픈 챌린지 웹페이지 음악연주 질문있습니다. 1 초보자 2020.03.29 195
211 한글html 1 키보드 향기 2020.03.29 922
210 예제 2-21 1 Daisy 2020.03.28 237
209 7장의 8번문제 1 궁금 2020.03.20 247
208 71page 1 아리송 2020.03.07 77
207 1장 test1, 2, 3 파일 2 열공중 2020.03.07 542
206 html에 css작성할때 2 궁금이 2020.03.03 353
205 61 page 실습문제 1번 오류찾기 2 궁금이 2020.02.15 1757
204 한글 타이틀이 깨져 보입니다. 1 안스가리오 2020.01.06 116
목록
쓰기
Board Pagination Prev 1 ... 5 6 7 8 9 10 11 12 13 14 ... 21 Next
/ 21
위로