dada's

DOM 본문

Javascript

DOM

dykang 2022. 6. 28. 14:15
728x90

 

DOM(Document Object Model)에 대한 개념에 대해 알아보자

 

자바스크립트는 HTML조작에 특화된 언어이다

그런데 어떻게 자바스크립트가 HTML을 조작할까?

HTML을 조작하기 위해선 HTML을 자바스크립트가 해석할 수 있도록 정리가 필요하다

그래서 자바스크립트는 HTML을 쉽게 해석하기 위해 오브젝트(Object)와 비슷한 자료형에 담아서 사용한다

이렇게 HTML자료를 정리한 것을 DOM이라고 한다

 

 

<브라우저는 HTML을 읽을 때 DOM을 생성한다>

브라우저는 HTML을 읽을때 DOM을 생성한다

HTML을 위에서부터 한줄씩 해석을 하는데 HTML보다 위에 HTML을 조작하는 자바스크립트를 작성하면

DOM이 생성되기 전이기 때문에 해석을 못한다.

 

 

 

<위와 같이 HTML문서 위에 자바스크립트를 생성 후 에러를 없애려면?>

jQuery에서는 HTML파일을 다 읽었는지 알려주는 이벤트 리스너가 있다

=> $(document).ready(function(){});

이 코드 안에 스크립트를 짜주면 HTML문서를 다 읽고나서 스크립트를 실행하기때문에 HTML위에 작성해도 문제가 없다

안정적이지만 사실 <body>태그가 끝나기전에 자바스크립트를 다 작성하면 문제가 없다

내가 자바스크립트 작성위치를 정할 수 없을때 유용한 방법이다

 

 

 

<DOM생성 + CSS,JS파일이 로드됐는지 확인하는 이벤트 리스너>

ready()함수는 DOM이 생성되었는지만 체크하지만 load라는 함수는 CSS,JS파일도 로드가 되었는지 확인 해 주는 이벤트 리스너이다

=> $(document).on('load', function(){}); 이렇게 작성하면된다

이미지등 로딩이 완료되면 동작해주는 UI를 만들때 자주 사용한다

주의) $('').load(function(){}); = jQuery 3버전 이상에서 load함수는 Ajax용으로 쓰기때문에 이렇게 쓰면 안된다

 

 

 

<ready이벤트리스너 쌩자바스크립트 버전>

document.addEventListener('DOMContentLoaded', function(){});

728x90

'Javascript' 카테고리의 다른 글

Javascript에서 this의 뜻  (0) 2022.07.31
alert, prompt, confirm  (0) 2022.06.28
[Javascript] input 값 가져오기 input value  (0) 2022.06.13
[Javascript] Math.random()  (0) 2022.06.11
[Javascript] Math 객체  (0) 2022.06.10
'Javascript' Related Articles more
Comments