새소식
반응형
Programming language/Javascript,jQuery
DOM(Document Object Model)
- -
반응형
DOM(Document Object Model)
DOM은 Document Object Model의 약자로 번역 그대로 문서 객체 모형으로 해석이 가능하다.
W3SCHOOLS의 말을 빌려보면 DOM은 W3C (World Wide Web Consortium) 표준으로서 프로그램 및 스크립트가 문서의 내용, 구조 및 스타일을 동적으로 액세스하고 업데이트 할 수있게 해주는 플랫폼 및 언어 중립적 인터페이스이다.
쉽게 DOM은 우리가 HTML 요소를 제어할 수 있게 방법을 제공해준다고 생각하면 된다. 그리고 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작한다.
오해하면 안되는 것은 DOM은 자바스크립트에서 정의한 것이 아닌 W3C 표준이라는 것이다.
DOM은 아래와 같이 트리 형태의 자료 구조를 가진다.
요소가 상하 관계에 있을 경우 부모요소라 하며, 평행관계에 있을 경우 형제 요소라 한다.
요소가 한 단계 더 위에 있는 경우 조상요소라 한다.(TITLE의 하위에 있는 TEXT에게 HEAD는 조상요소)
DOM의 트리 구조에는 element요소 뿐 아니라 text, attribute 등 모든 요소에 동적으로 접근이 가능하다.
DOM에 접근하기 위해서는 window 객체 또는 document 객체를 사용하면 된다.
아래는 document 객체를 사용한 대표적인 방법이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <%@page language="java" contentType="text/html; charset=euc-kr"%> <html> <head> <title>DOM</title> <script> window.onload = function(){ document.getElementById("dom01").innerHTML = 'DOM 접근법'; } </script> </head> <body> <form name=f1 style=margin:0; onsubmit="return false;" > <div id='dom01'> </div> </form> </body> </html> | cs |
개발을 할 때 DOM을 사용, 접근하기 위해서 순수 자바스크립트를 사용하면 코드가 길어지는 상황이 불가피하다. 이 문제를 해결한 것이 JQuery이다.
JQuery는 나중에 또 정리를 해봐야겠다.
+ 피드백은 언제나 환영입니다 :)
반응형
'Programming language > Javascript,jQuery' 카테고리의 다른 글
| [Javascript]파일 확장자 체크하기 (0) | 2018.08.31 |
|---|---|
| [Javascript]이미지 크기 구하기 (4) | 2018.08.31 |
| [Javascript]div modal창 만들기 (0) | 2018.06.26 |
| [Javascript]id값 가져오기 (0) | 2018.06.25 |
| [Javascript]document.getElementById() - (2) (0) | 2018.06.22 |
Contents
소중한 공감 감사합니다