관리 메뉴

KorSA

[ JavaScript / jQuery ] DOM과 JavaScript, jQuery 본문

Knowledge Wiki/Javascript

[ JavaScript / jQuery ] DOM과 JavaScript, jQuery

Praiv. 2021. 12. 15. 18:10
320x100

1. DOM (Document Object Model)
    JavaScript가 HTML 쌩문법을 아는게 아니기 때문에 HTML 정보를 Object화하여 다루어야 한다.
    그게 DOM임.

2. HTML 코드가 나오기 전 JavaScript 코드가 HTML 태그를 찾으려하면 오류가 발생한다.
    JavaScript 입장에서는 아직 DOM이 완성되어있지 않기 때문.

3. jQuery ready() 이벤트리스너
    8과 같은 에러가 날 때 사용하면 좋은 함수.
    ready() 이벤트 리스너는 "HTML을 다 읽어들였는지" 알려준다.
    HTML을 다 읽고 난 후 구동시켜야되는 자바스크립트 코드들은 여기 적으면 된다.

// jQuery 문법
$(document).ready(function(){
	// DOM 생성 완료 후 작업
});

// 쌩 JavaScript 문법
document.addEventListener('DOMContentLoaded', function(){
	// DOM 생성 완료 후 작업
});


4. jQuery load() 이벤트리스너
    load() 이벤트 리스너는 DOM 생성 + 이미지, CSS, JS파일 로드도 다 완료된 후 실행됨.
    jQuery 3 이상에서는 AJAX 문법과 겹칠 수 있기 때문에 $('').load(function(){}); 이렇게 쓰면 안된다.

728x90
728x90
Comments