본문

DOM

반응형

# DOM


http://www.w3.org/DOM/ 에서는 DOM이 무엇인가에 대해 이렇게 기록해놓았네요. 


The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. This is an overview of DOM-related materials here at W3C and around the web.


DOM은 문서의 내용, 구조, 스타일을 프로그램이나 스크립트를 통해 다아니믹하게 접근, 수정 할수 있게 하는 플렛폼/언어 중립의 인터페이스다. 


이미 처리가 완료되서 사용자게에 보여진 문서를 다시 수정해서 그 처리결과를 보여줄 수 있다.


- 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. 

- HTML문서의 요소들에 접근 가능하도록 되어있다.

- DOM을 사용하면 데이터를 동적으로 화면에 접근하고 변경할 수 있어 접근성과 조작성을 부여할 수 있다.



ex) DOM API



# jQuery의 DOM접근 & 순수 JavaScript의 DOM 접근

jQuery에서는 CSS의 선택자(Selector) 방식을 사용해서 DOM에 접근합니다. 


아래 그림의 오른쪽이 jQuery에서 선택자를 사용하는 방식입니다. 

선택자에는 여러 가지 종류가 있는데, 자주 사용하는 선택자로는 id선택자, class선택자, tag선택자 등이 있습니다. 



그럼 이제 jQuery에서의 DOM접근과 JavaScript에서의 DOM접근을 비교해보도록 하겠습니다.

위에서도 언급했듯이, jQuery에서는 위 그림의 내용처럼 jQuery DOM객체 생성함수인 $();을 사용하여 선택자로 간단하게 DOM에 접근합니다. 하지만 JavaScript에서는 브라우저의 여러 가지 내장 메소드(method)를 통해 DOM에 접근합니다.




- 출처


반응형

공유

댓글