jQuery와 DOM

JavaScirpt vs jQuery ?

jQuery는 JavaScript의 라이브러리 중 하나이다.

순수 JavaScript에 비해 간단하게 DOM접근을 할 수 있다는 것이 가장 큰 장점 중 하나이다.

그렇다면 DOM은 무엇일까?

DOM은 Document Object Model 의 줄임말로 HTML 문서 모든 요소에 접근하는 방법을 정의한 API이다.

DOM은 노드구조로 트리형태로 표현된다.

HTML문서는 중첩된 태그로 구성된 계층적인 구조이다.

이는 DOM에서 트리구조로 표현된다. 위 트리구조를 보면 Element 뿐만 아니라, Attribute, Text까지 노드로 표현되어 있음을 알 수 있다. 즉, DOM을 통해 스크립트가 문서 내의 모든 요소에 동적으로 접근할 수 있다는 것이다.

그래서 DOM을 사용하면 문서상의 요소에 접근해 생김새나 내용, 속성을 조작할 수 있다. 뿐만 아니라 새로운 요소나 내용을 만들어서 사용자가 필요로 할 때 문서 상에 적용시킬 수 있다. 이러한 점 때문에 DOM은 웹 페이지 상의 풍부한 상호작용을 위해서 꼭 필요하다고 볼 수 있다.

이러한 DOM접근을 순수 JavaScript로 하면 다수의 반복문과 장문의 스크립트를 작성해야 하는 경우가 많다.

바로 이 문제를 해결해주는 것이 jQuery의 장점 중 하나이다.

DOM 노드 객체의 childNodes 프로퍼티는 해당 노드의 자식 목록을 반환한다.

firstChild, lastChild, nextSibling, previousSibling, parentNode 프로퍼티는 노드 트리를 탐색하는 수단을 제공한다.

jQuery에서는 CSS의 선택자 방식을 사용해서 DOM에 접근한다.

※ 출처 : http://chie.co.kr/150225/html/step_01.php

      http://www.nextree.co.kr/p9747/