[JavaScript] Uncaught TypeError: Cannot read properties of null (reading 'style')
자바스크립트 파일이 먼저 읽히고 html이 그 이후 에 읽히면
자바스크립트 실행시 html에 선언된 클래스를 확인할 수 없다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
<script src="script.js" ></script>
</head>
<body>
<p class="paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, soluta ullam repellendus, deleniti necessitatibus nulla voluptate excepturi officia iste earum tempora architecto debitis rem nesciunt. Quaerat incidunt fuga ipsa autem?
</p>
</body>
</html>const paragraph = document.querySelector(".paragraph");
paragraph.style.background = 'dogerblue';하세요🟪 해결방안1 : defer
<script src="script.js" defer></script> //defer 추가🟪 스크립트 파일을 html 파싱이후 실행되게 명명
🟪 여러 defer스크립트라면 작성 순서대로 실행
🟪 헤드 안에서 사용 가능
🟪 해결방안2 : 스크립트 파일을 바디 끝에 두기
🟪순차적 코드 실행시 순서자체를 html 파일실행이 끝난 뒤에 두는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript</title>
</head>
<body>
<p class="paragraph">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, soluta ullam repellendus, deleniti necessitatibus nulla voluptate excepturi officia iste earum tempora architecto debitis rem nesciunt. Quaerat incidunt fuga ipsa autem?
</p>
<script src="script.js"></script> //여기에
</body>🟪 해결방안3 : DOMContentLoaded
window.addEventListener('DOMContentLoaded',()=>{
const paragraph = document.querySelector(".paragraph");
paragraph.style.background = 'dogerblue';
});🟪 html파싱이 끝나고 브라우저가 DOM(Document object model)트리를 와성했을때 발생해라 라고 이벤트로 분리
🟪 스크립트가 html 보다 먼저 실행되도 DOMContentLoaded 의 조건이 되어야 스크립트가 실행됨
🟪 순서보장
🟪 해결방안4 :모든 리소스가 로드 완료되면 실행
window.addEventListener('load',()=>{
const paragraph = document.querySelector(".paragraph");
paragraph.style.background = 'dogerblue';
});