DOM(Document Object Model)

DOM(문서 객체 모델)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

쉽게 말해, JavaScript가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 Object 자료형으로 정리해서 사용한다는 것이다.

브라우저는 HTML 문서를 읽을 때 DOM을 생성한다. 따라서, 하단 소스와 같은 경우는 에러가 난다. 에러가 나는 이유는 <p id="test">를 읽기 전이라 p태그에 대한 DOM이 아직 생성되기 전이기 때문이다.

<script>
  document.getElementById('test').innerHTML = '안녕'
</script>

<p id="test">임시글자</p>

이러한 문제를 해결하려면?

jQuery

$(document).ready(function(){
  // $(document)에 있는 HTML을 다 읽었을 때 실행할 코드 
});

$(document).on('load', function(){
  // $(document)에 있는 이미지, CSS 파일 등이 다 로드가 되었을 경우 실행할 코드 
});

• 참고로 $('').load(function(){}) 이렇게 쓰면 안 된다. jQuery 3버전 이상에서 load() 함수는 Ajax 용으로 사용된다.

JavaScript

function ready() {
        alert('DOM이 준비되었습니다!');
}
document.addEventListener("DOMContentLoaded", ready);