-
DOM의 개념과 이벤트리스너 ready, loadJAVASCRIPT 2022. 2. 16. 13:19
DOM은 Document Object Model이다.
HTML을 조작하려면 HTML을 자바스크립트가 해석할 수 있는 문법으로 정리하는 작업이 필요하다. 예를 들면,
<div class="red-text">안녕하세요</div>
이런 div가 있을때 조작하려면 document.querySelector(저div).innerHTML="안녕" 이렇게 조작하는데 자바스크립트가 이 div를 조작하려면 컴퓨터에서 div를 미리 object자료형으로 정리해놓는다.
var document = { div태그 : { style : {color : 'red', width : '100%'} innerHTML : '안녕하세요' } }
이렇게 object 자료에 정리를 해놔야 하며, 이걸 document object라고 부르며 뒤에 model을 붙여 DOM 이라고 부른다.
그냥 자바스크립트가 HTML에 대한 정보를 Object 자료형으로 정리해서 사용한다고 알면 된다고 한다.
근데 이런 DOM으로 에러가 생길때가 있는데
<script> document.getElementById('test').innerHTML = '안녕' </script> <p id="test">임시글자</p>
이렇게 쓰면 id가 test인게 없다고 에러가 뜨는데, p태그를 읽기 전이라 script태그에서 p태그에 대한 DOM이 생성되지 않았기 때문이다.
이런 문제를 해결하기 위해 제이쿼리에선 ready라는 이벤트 리스너를 쓴다. HTML을 다 읽고난 후 자바스크립트를 사용하고 싶을때 사용하며, 사용법은
$(document).ready(function(){ //$(document)에 있는 HTML을 다 읽었을 때 실행할 코드 }); //그냥 자바스크립트는 document라고 씀 document.addEventListener('DOMContentLoaded', function() { //DOM생성이 완료되었을 때 실행할 코드 }); //생자바스크립트에선 ready대신 addEventListener에 DOMContentLoaded라고 쓰면 된다.(IE9이상 작동)
이렇게 사용하면 현재 페이지 html을 다 읽고나서 내부코드를 실행한다고 한다. 하지만 script 태그를 body 태그 끝나기 전 위에 작성하면 에러는 생기지 않으므로 script 태그 위치를 맘대로 조작하지 못할 때 사용하면 좋다.
ready와 비슷하게 load가 있다.
$('img').on('load', function(){ //이미지가 다 로드가 되었을 경우 실행할 코드 }); //$('img')대신 $(document)에 써도 된다.
DOM생성과 더불어 css 이미지 js파일 등등 로드되었는지 전부 확인 가능하다. 이미지 등 로딩이 완료되면 뭔가 동작시키는 UI를 만들 때 자주 쓴다고 한다. ( $('').load(function(){})이렇게 사용은 안된다. load가 다른뜻으로 쓰임 )
'JAVASCRIPT' 카테고리의 다른 글
Scroll UI (2) 2022.02.18 ajax (2) 2022.02.17 데이터 바인딩 연습과 sort,map,filter등 분류 함수 (2) 2022.02.15 인터렉티브 폼 (input,change이벤트, HTML동적생성, forEach반복문) (2) 2022.02.11 array와 object 자료형, 데이터바인딩 (2) 2022.02.10