문서 객체 모델 (DOM)
Document Object Model → DOM
DOM?
자바스크립트를 활용해서 html요소를 조작할 수 있게 하는 방법
그 방법을 모아둔 개체들의 집합
문서 객체: HTML요소
문서 객체 모델: 그걸 조작하는 객체들의 집합
DOMContentLoaded
이것은 실행이 안 된다 왜인지 알아보자
ㅋㅋ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 코드를 자바스크립트로 조작하기</title>
<script>
// HTML 태그를 쉽게 만들 수 있는 콜백 함수를 선언합니다.
const h1 = (text) => `<h1>${text}</h1>`
</script>
<script>
document.body.innerHTML += h1('1번째 script 태그')
//innerHTML : body 태그가 생성되기 전에 script 태그로 body태그를 조작
</script>
</head>
<body>
<h1>1번째 h1 태그</h1>
<script>
document.body.innerHTML += h1('2번째 script 태그')
</script>
<h1>2번째 h2 태그</h1>
</body>
</html>🤔
document.body.innerHTML코드 ? ? ?
문서(document)의 바디(body)안에 있는 HTML코드(innerHTML)를 자바스크립트로 조작할 수 있게 해주는 코드
실행 결과
→ 결과를 보면 body 태그가 생성되기 이전에 head 태그 안의 script 태그에서 body 태그를 조작하던 부분 document.body.innerHTML += h1('1번째 script 태그')은 화면에 출력되지 않는다.
기본적으로 head 태그 내부에 script 태그를 배치하면 body 태그에 있는 문서 객체(요소)에 접근할 수 없다.
head 태그 내부의 script 태그에서 body 태그에 있는 문서에 접근하려면 화면에 문서 객체(요소)를 모두 읽을 때 까지 기다려야 한다.
DOMContentLoaded : 문서 객체를 모두 읽고 나서 실행하는 이벤트
DOMContentLoaded 상태가 되었을 때 콜백 함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 코드를 자바스크립트로 조작하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = (text) => `<h1>${text}</h1>`
document.body.innerHTML += h1('script 태그')
})
</script>
</head>
<body>
<h1>h1 태그</h1>
</body>
</html>이렇게 코드를 쓰면 script 태그가 body 태그 이전에 위치해도 문제없이 코드가 실행된다.
document.addEventListener('DOMContentLoaded', () => {})
document라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때 매개변수로 지정한 콜백 함수를 실행
왜 쓰는지?
DOM이 생성되기 전 DOM을 조작하는 자바스크립트 코드가 실행되어 원하지 않는 결과를 내는것을 막을 수 있음
정리 했지만 사실 아직 이해 안간다~~
내일 다시 봐야지~~
엉망진창