728x90
[JavaScript] DOM(Document Object Model) 이해하기
DOM(Document Object Model)의 정의
: XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다.
: 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
: W3C의 표준 객체 모델이며, 다음과 같은 계층구조로 표현된다.
DOM 활용
자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다.
: 새로운 HTML 요소나 속성을 추가
: 존재하는 HTML 요소나 속성을 제거
: HTML 문서의 모든 HTML 요소를 변경
: HTML 문서의 모든 HTML 속성을 변경
: HTML 문서의 모든 CSS 스타일을 변경
: HTML 문서에 새로운 HTML 이벤트를 추가
: HTML 문서의 모든 HTML 이벤트에 반응
주의사항
HTML 파서는 script 태그를 만나면 파싱을 멈추고 스크립트 파일을 읽기 때문에 DOM 생성이 지연되어 스크립트 파일이 많거나 파일이 크면 읽는 시간이 오래 걸려 Display에 표시되는 것이 지연된다. DOM tree가 완성되지 않은 상태에서 Javascript가 DOM을 조작한다면 에러가 발생할 수 있다.
DOM과 Javascript, jQuery 이해
DOM이 잘 이해되지 않을 수도 있다. 그렇다면 JavaScript, jQuery와는 어떤 관계에 있는지 비유적으로 알아보자.
DOM = 집
Javascript = 도구(망치,톱, 연필,볼펜 등)
jQuery = 자동화 된 도구
집이 한 채 있다고 가정한다면, 집에서 밥도 해먹고, 텔레비전도 보고, 집 수리도 하고, 공부도 하려면 여러 가지 도구가 필요하다.
밥솥, 가스레인지, 텔레비전, 리모컨, 수리도구(망치, 톱 등), 연필, 책 이 필요할 것이다.
자동화된 도구로 일을 한다면 밥솥, 가스레인지 필요 없이 전기밥솥 하나면 된다.
TV를 보기 위한 리모컨도 TV용 셋톱박스용 따로 쓰지 않고 통합 리모컨을 쓸 수 있다.
수리를 할때도 드라이버 대신 전동드라이버, 톱도 전동톱을 사용할 수 있다.
이걸 웹으로 치환해보자.
브라우저에서 하나의 화면을 보여주려면 DOM을 구조로 만든 HTML 파일을 만들었을 것이다.
화면에서 여러가지 처리를 하려면(alert, 화면 색변환, 문자표현, 서버로 전송, validation) javascript를 이용해서 처리를 해야하는 것이고(집안 도구 : 밥솥, 각종리모컨, 드라이버, 톱)
jQuery같은 JS Framework는 Javascript를 좀더 편하게 쓰기 위해서 만들어놓은 자동화 공구(전기밥솥, 통합리모컨, 전동드라이버, 전동톱 등)라고 바꾸어 말할 수 있다.
Bootstrap은 더 예쁘고 편리한 쿠쿠압력밥솥, 보쉬전동드릴 이라고 할 수 있을까…?
Document
document는 DOM의 진입점 역할을 한다.
Document 객체는 웹 페이지 그 자체를 의미하며, HTML 요소에 접근하고자 할 때는 Document 객체부터 시작해야 한다.
document의 메소드를 활용하면 HTML 요소의 선택, HTML 요소의 생성, 이벤트 핸들러 추가, HTML 객체 선택 등을 할 수 있다.
+ HTML 요소를 선택하기 위해 제공되는 메소드
선택
| 메소드 | 설명 |
| document.getElementsByTagName(태그이름) | 해당 태그 이름의 요소를 모두 선택함. |
| document.getElementById(아이디) | 해당 아이디의 요소를 선택함. |
| document.getElementsByClassName(클래스이름) | 해당 클래스에 속한 요소를 모두 선택함. |
| document.getElementsByName(name속성값) | 해당 name 속성값을 가지는 요소를 모두 선택함. |
| document.querySelectorAll(선택자) | 해당 선택자로 선택되는 요소를 모두 선택함. |
생성
| 메소드 | 설명 |
| document.createElement(HTML요소) | 지정된 HTML 요소를 생성함. |
| document.write(텍스트) | HTML 출력 스트림을 통해 텍스트를 출력함. |
이벤트 핸들러 추가
| 메소드 | 설명 |
| document.getElementById(아이디).onclick = function(){ 실행할 코드 } | 마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함. |
HTML 객체 선택
| 객체 집합 | 설명 | DOM Level |
| document.anchors | name 속성을 가지는 <a>요소를 모두 반환함. | 1 |
| document.applets | applet 요소를 모두 반환함. (HTML5에서 제외됨) | 1 |
| document.body | <body>요소를 반환함. | 1 |
| document.cookie | HTML 문서의 쿠키(cookie)를 반환함. | 1 |
| document.domain | HTML 문서가 위치한 서버의 도메인 네임(domain name)을 반환함. | 1 |
| document.forms | <form>요소를 모두 반환함. | 1 |
| document.images | <img>요소를 모두 반환함. | 1 |
| document.links | href 속성을 가지는 <area>요소와 <a>요소를 모두 반환함. | 1 |
| document.referrer | 링크(linking)되어 있는 문서의 URI를 반환함. | 1 |
| document.title | <title>요소를 반환함. | 1 |
| document.URL | HTML 문서의 완전한 URL 주소를 반환함. | 1 |
| document.baseURI | HTML 문서의 절대 URI(absolute base URI)를 반환함. | 3 |
| document.doctype | HTML 문서의 문서 타입(doctype)을 반환함. | 3 |
| document.documentElement | <html>요소를 반환함. | 3 |
| document.documentMode | 웹 브라우저가 사용하고 있는 모드를 반환함. | 3 |
| document.documentURI | HTML 문서의 URI를 반환함. | 3 |
| document.domConfig | HTML DOM 설정을 반환함. (더는 사용하지 않음) | 3 |
| document.embeds | <embed>요소를 모두 반환함. | 3 |
| document.head | <head>요소를 반환함. | 3 |
| document.implementation | HTML DOM 구현(implementation)을 반환함. | 3 |
| document.inputEncoding | HTML 문서의 문자 인코딩(character set) 형식을 반환함. | 3 |
| document.lastModified | HTML 문서의 마지막 갱신 날짜 및 시간을 반환함 | 3 |
| document.readyState | HTML 문서의 로딩 상태(loading status)를 반환함. | 3 |
| document.scripts | <script>요소를 모두 반환함. | 3 |
| document.strictErrorChecking | 오류의 강제 검사 여부를 반환함. | 3 |
728x90
'Web' 카테고리의 다른 글
| [jQuery] jQuery 기본 문법 이해하기 (0) | 2022.06.18 |
|---|---|
| [JavaScript] JavaScript 기본 문법 (0) | 2022.06.18 |
| [HTML/CSS] github hosting (0) | 2022.06.16 |
| [HTML/CSS] 필수 CSS 선택자, CSS 속성 모음 (0) | 2022.06.15 |
| [HTML/CSS] HTML 태그 모음 (0) | 2022.06.15 |
댓글