본문 바로가기
language/JavaScript

jQuery란? DOM(Document Object Model)이란?

by 스파이디웹 2020. 6. 8.
728x90

jQuery란

-현재 가장 많이 사용하는 Ajax 라이브러리로, 이것을 사용하면 웹 애플리케이션 작성이 쉬워지며, 자바스크립트나 Ajax 및 DOM 관련 작업을 간단히 처리해준다.

 

 

제공하는 기능

-HTML/DOM작업

-CSS 작업

-HTML 이벤트 처리

-각종 효과 및 애니메이션, Ajax, 각종 유틸리티

 

다운로드

http://jquery.com/download/ 에서 압축된(compressed) 최신의 버전을 다운받으면된다.

 

 

DOM이란?

-문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다.

 

-내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 됩니다.

 

-View Source는 그 페이지를 이루고 있는 HTML을 보여줄 뿐이며, 내가 작성한 HTML과 같습니다. 하지만 코드 작성 시 백엔드 언어를 사용한 템플릿 파일을 이용한 경우, 정확히는 컴파일 된 결과를 말하는 것입니다. 혹은 작성된 코드에 대해 빌드 과정을 거친 다음에 웹사이트에 배포되는 경우엔 HTML 코드는 압축되거나 변형되었을 수도 있습니다.

 

-브라우저에서 지원하는 개발자 툴에서 보이는 것이 바로 DOM입니다! 이 툴에서 시각적으로 표현한 DOM이 나의 HTML 코드와 동일할 수는 있지만, 대개는 달라지게 되며 DevTool에서는 이러한 변경 사항이 적용되어 표시됩니다.

 

-JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.

DOM은 바로 이 작업이 이루어지는 장소입니다.

사실 우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API" 입니다.

엘리먼트에 click 이벤트가 일어나는지 감시하도록 JavaScript를 작성했다고 합시다. 하지만 이 엘리먼트는 DOM 노드입니다. 우리는 DOM에 있는 DOM property를 통해서 listener를 붙여놓은 것 뿐이죠.

정리하자면, DOM은 브라우저에 의해 기록되는 모든 것입니다. JavaScript는 이를 조작할 수 있는 문법이고 언어일 뿐이며, 이는 Node.js 등의 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있습니다.

728x90

'language > JavaScript' 카테고리의 다른 글

Ajax란? 정의,탄생배경,동작순서, 구성요소  (0) 2020.06.08
동기(synchronous)와 비동기(asynchronous)의 개념과 차이  (0) 2020.06.08
bootstrap이란?  (0) 2020.06.08
JSON이란?  (0) 2020.06.07
javascript란?  (0) 2020.06.07

댓글