자바스크립트에서 스크립트의 위치?

Question

<ul> <script> var a = document.getElementsByTagName('caption'); for (var i = 0; i < a.length; i++) { document.write("<li>"+a[i].innerText+"</li>"); } </script> </ul> <table> <caption> 테스트 </caption> </table>

위와같이 테이블이 많을 경우 테이블의 캡션 부분 이름만 바꾸면 자동으로 리스트를 생성하여 표 위쪽으로 목록을 만들고 싶습니다.

스크립트 코드를 </body>태그 바로 위로 옮겼을때는 제대로 작동하는데 위와 같이 표 위쪽에 놨을때는 동작을 안하네요...

표 위쪽에 제대로 동작하게 하는 방법이 있을까요?

Answer 1

브라우저가 HTML, CSS, JS 를 읽어들이는건 위에서부터 아래로 읽는게 우선 기본사항입니다.

이때 "getElementsByTagName('caption');" 하셨는데

이때는 아직 HTML 에서 caption 이라는 Tag가 브라우저한테 인식이 안된 상황인것이죠.

그런데 caption 을 읽고, 무언가를 하려고 하니 동작을 안하는거라고 보시면 됩니다.

의아하시면 먼저 console 이나 break point 걸어서 해당 line 일때

getElementsByTagName('caption'); 이 정상적으로 인식되는지 살펴보시는게 좋을듯 합니다^^

이런 경우를 미연에 방지하고싶으시면,

JS 로 DOM 을 조작할때 모든 HTML, CSS 등을 load 하고 나서,

JS 를 컨트롤 하는 옵션을 주시면 됩니다.

https://programmingsummaries.tistory.com/158

https://bounce4me.tistory.com/75

페이지 참조하시면 코드 써있습니다.

jQuery 에서 자주사용하시는

$(document).ready(function() { "DOM 로드 후 액션" } 도 마찬가지의 기능을 하며,

( 순수 JS 에서 window.onload 등 )

"결국은 브라우저가 DOM Parse 를 모두 끝낸후에 JS 핸들링을 하느냐" 가 핵심이라고 보시면 됩니다^^