오늘은 DOMContentLoaded, onload의 차이점과 DOM 트리의 대해 간단하게 적어보려고 합니다.
전부터 제이쿼리를 많이 사용했었지만
최근에는 DOM형으로 사용한다고 하여
공부할 겸 적어봐요. ㅎㅎ
1. DOM 넌 뭐야!?
DOM(Document Object Model) :
document(문서) Object(객체) Model(모델)
즉, HTML 문서를 구성하는 요소(Element)를 객체 로 표현한 것을 트리 형태로 구성한 것입니다.
트리 형태 :
<html>
|
<head> --< body>
이렇게 html 안에 head,body가 있는데 head와 body는 html의 자식입니다. 이런식으로 요소들을 정의하는데요. 이 구조를 트리 구조라고 해요.
1-2. DOM을 자바스크립트 활용
- 이렇게 구성된 DOM은 자바스크립트와 같은 프로그래밍 언어를 이용하여 조작할 수 있는데요.
일단 코드를 한번 볼까요??
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1 id="headig">Hello, Java</h1>
</body>
</html>화면 개발을 하실 때 위에 같은 요소들을 많이 접해봤을거에요. <body> 같은 HTML문서의 요소들을 JavaScript가 이용할 수 있는 객체를 "문서의 객체"라고 하는데요.
구현 방법은
1. 위에 HTML를 작성해서 로드를 하면 브라우저는 HTML 문서를 파싱하여 DOM을 생성합니다.
var heading = document.getElementById("heading");
console.log(heading.innerHTML);
// 결과
"Hello, Java"위에 코드와 같이 getElementById() 메서드를 이용하여 id가 "heading"인 h1 요소를 선택하고, innerHTML속성을 이용하여 요소의 내부 텍스트를 출력합니다.
이것이 DOM의 객체를 활용해서 자바스크립트로 구현하는 것입니다.
2.DOMContentLoaded
- HTML 문서의 파싱이 완료되고, DOM 트리가 생성 된 후 발생하는 이벤트로 (DOM트리면 완성 된 후에 발생합니다. - 모든 리소스 제외)
document.addEventListener("DOMcontentLoaded",function(){
console.log("DOM loaded");
});위에 자바스크립트 코드를 작성하면, 페이지가 완전히 로드된 후에 이벤트가 발생합니다.
3. onload
- 웹 페이지의 모든 리소스(HTML,CSS,이미지,스크립트 등)가 로드된 후에 발생하는 이벤트입니다. 결국 모든 리소스를 로드 시킨 후에 발생하는 경우라 DOMContentLOaded 보단 느립니다.
스피드는 DOMContentLoaded가 좀 더 빠르겠지만
리소스를 전부 로드한 상태에서 작업을 해야하는상황에서는 DOMContentLoaded보다는 onload가 낫겟네요.
'Programming_Language > JavaScript' 카테고리의 다른 글
| [tag/CSS] Text 띄어쓰기 JSP에서 적용하기 위해서는 <pre> 사용 (0) | 2024.01.30 |
|---|---|
| [Event] 반응형 - 페이지 이동 및 화면 크기 변경으로 load, resize 이벤트 화면 크기 변경해보자!! (0) | 2024.01.17 |
| [JavaScript] TextArea 작성 및 유효성(특수기호) 검사, 복사 붙이기 (0) | 2024.01.12 |
| [JavaScript] 뒤로가기 문제 해결은 이것! OnpageShow (0) | 2024.01.09 |
| [JQuery] 모달 팝업 동작 시 부모창 스크롤 동작 못하게 하기 (0) | 2024.01.09 |
