[JS] DOM, querySelector, Event, Ajax, Window객체
DOM (Document Object Model)
html elements들이 계층 형태의 객체로 저장되는 것이다.
저장된 정보를 Dom tree라고 부른다. 실제로 구조를 살펴보면 tree구조로 저장이 되어 있다.
MDN에서는 DOM을 이렇게 정의 한다.
'문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.'
querySelector (+ getElementById, getElementByClass)
querySelector은 html elements들을 태그명, id, class를 통해 가져올 수 있는 메서드이다.
getElementById와 getElementByClass는 각각 id와 class를 통해서만 html elements들을 가져올 수 있다.
document의 메서드로 사용 시 앞에 document. 을 붙인다. ( document.querySelector("div"); )
Event (+ addEventListener)
우리가 웹 브라우저를 사용하며 마우스를 움직이거나, 클릭하거나, 선택할 때 등 거의 모든 동작에서 이벤트가 발생한다.
이 이벤트라는 것을 활용해서 이벤트가 발생했을 시 어떠한 동작을 하라고 시킬 수 있다.
이때 사용하는 것이 addEventListener이다.
element.addEventListener("이벤트명" 실행할 것); 이렇게 사용한다.
Ajax (XMLHttpRequest)
페이지 전체가 로딩되는 시간과 일부분만 로딩되는 시간 중 어느 것이 더 짧을까? 당연히 후자이다. Ajax는 페이지 일부분을 로딩할 수 있게 해주는 기술이다.
HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 요청한다.
이 때, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼 시간을 아낄 수 있다.
Window (setTimeout, setInterval, clearInterval)
window는 전역객체이다. 즉, window.alert("안녕하세요"); 와 alert("안녕하세요"); 는 같다.
setTimeout(실행할 것, 시간) : 설정한 시간 후에 '실행할 것'이 실행된다. (callback)
setInterval(실행할 것, 시간) : 일정 시간마다 '실행할 것'이 실행된다.
clearInterval(setInterval가진 변수) : interval을 중단한다.
+ 참고로 1000이 1초이다.
실습파일 링크