-
<script>태그 위치JavaScript/DOM 2023. 1. 11. 23:09
자바스크립트는 body 요소의 가장 아래에 위치시키는 것이 좋다
- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생할 수 있다
- 자바스크립트 로딩/파싱/실행의로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다
// 자바스립트를 head 부분에 위치 시켰을 때
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script> /* DOM API인 document.getElementById는 DOM에서 id가 apple인 HTML 요소를 취득한다 DOM API가 실행되는 시점에는 아직 id가 apple가 HTML 요소를 parsing하지 않았기 떄문에 DOM에는 id가 apple인 요소가 들어있지 않다. 따라서 아래 코드는 정상적으로 id가 'apple' 인 요소를 취득하지 못한다 */ const $apple = document.getElementById('apple'); // id가 apple인 HTML 요소의 CSS color프로퍼티 값을 변경한다. // 이때 DOM에는 id가 apple인 HTML 요소가 포함되어 있지 않기 때문에 에러가 발생한다 $apple.style.color = 'red'; // TypeError: Cannot read property 'style' of null </script> </head> <body> <ul> <li id="apple">apple</li> <li id="banana">banana</li> <li id="orange">orange</li> </ul> </body> </html>// 자바스립트를 body부분에 위치 시켰을 때
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li id="apple">apple</li> <li id="banana">banana</li> <li id="orange">orange</li> </ul> <script> const $apple = document.getElemenById('apple'); $apple.style.color = 'red'; </script> </body> </html>자바스크립트 파싱에 의한 DOM 생성이 중단(blocking)되는 문제를 해결하기 위해 async와 defer 어트리뷰트를 사용한다.
단, src 어트리리뷰트를 통해 외부 JS파일을 로드하는 경우에만! 사용할 수 있다. src 어트리뷰트없는 인라인 자바스크립트에는 사용할 수 없다
<script async src="extern.js"></script> <script defer src="extern.js"></script>'JavaScript > DOM' 카테고리의 다른 글
getAttribute(), setAttritube(), removeAttribute() (0) 2023.01.28 innerHTML, outerHTML, textContent, innerText (0) 2023.01.28 DOM조작 (0) 2022.11.26 DOM - 노드 (0) 2022.11.26 DOM요소에 접근하고 속성 가져오기 (0) 2022.11.23