TIL. [javascript] Javascript vs Jquery (feat. Ajax, DOM)

내가 참고한 채팅창 구현 코드에는 $(document).on(){}을 이용한 이벤트 구현이 나온다. 이 부분이 궁금해서 좀 찾아보니 Jquery라는 라이브러리를 사용하는 방식이라고 한다.

아직 Jquery를 잘 모르니.. 일단은 그렇게 알고 사용한다 치더라도, 순수 Javascript에선 안 되는건지 궁금했다.

일단 $(document).on(){}을 사용하는 이유는 Ajax 때문이라고 한다. Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션 제작에 사용된다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하며, 서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식등)의 정보를 주고 받을 수 있다.

그리고 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 '비동기성'이라는 강력함을 가지고 있다. 비동기성 덕분에 이벤트가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수있다. 사이트가 동적일 필요가 있거나 새로고침을 하면 비효율적일 때 사용하면 좋다.

채팅창을 구현하는 데 있어서 Ajax 기능을 사용하는 이유를 알겠다. 메시지 하나를 보낼 때 마다 페이지를 새로 구현해야한다면 너무 비효율적이기 때문이다.

그렇다면 왜 javascsript를 이용해 Ajax를 구현하지 않았을까. 확실한 것은 javascript를 통해서 Ajax 구현이 가능하다는 점이다.

여기서 필요한 개념이 DOM이다. DOM이란 Document Object Model을 의미한다. 계층이 있는 객체들을 document로 구현했다고 보면된다. DOM에 대해서

원래 없던 자식 객체라도 javascript를 통해서 HTML 태그 등에 추가할 수 있다. 이를 통해 동적 요소를 추가하거나 삭제할 수도 있다. 방법은 DOM 객체를 생성해 DOM 트리에 관련 명령을 내리면 된다.

DOM 객체를 생성하는 방법은 다음과 같다.

var newDIV = document.createElement("div");​

이를 통해 문서에 DOM 객체를 생성할 수 있다. 그리고 해당

newDIV.innerHTML = "new div"; //텍스트 추가
newDIV.setAttribute("id","myDiv"); //'setAttribute'로 속성 값 정하기. "id"=속성 이름, "myDiv"=속성 값

document.getElementById("parent-item").addEventListener("click", function(e) { 
     if(e.target && e.target.className == "foo") { }
});