2021. 1. 18. 16:07ㆍFront-end/Javascript
HTML DOM의 개념
- 브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만듬
- 예를 들면, <p> ... </p>로 구성된 요소는 p 객체로, <div> ..</div>로 구성된 요소는 div 객체로 생성함
- 이들은 HTML 문서의 각 요소를 객체화한 것이라는 뜻으로 HTML DOM(Document Object Model) 객체라고 부름
- HTML을 동적으로 제어하기 위해서는 HTML DOM에 대한 지식이 반드시 필요
- 각 HTML 태그에는 모양을 결정하는 CSS3 스타일 시트가 동반되므로, DOM 객체를 통해 CSS3 스타일의 프로퍼티 값을 바꾸면 HTML 태그가 출력된 색이나 모양을 동적으로 제어할 수 있다.
- DOM 객체를 통해 HTML 태그의 콘텐츠, 즉 텍스트나 이미지도 변경 가능
DOM 트리의 특징
- DOM 트리의 루트는 document 객체이다. ★ document 객체는 DOM 객체가 아님에 유의!
- DOM 객체의 종류는 HTML 태그 종류만큼 있다
- HTML 태그 당 DOM 객체가 하나씩 생성된다. (같은 태그가 여러 개 있다고 해도 각 태그마다 DOM 객체가 생김)
- DOM 트리는 HTML 태그의 포함 관계에 따라 부모 자식 관계로 구성된다.
( <html> 태그 안에 <head>와 <body>가 있으므로 html 객체는 head와 body를 자식 객체로 가진다. )
DOM 객체의 구성요소
- HTML 태그의 요소
HTML 태그는 엘리먼트(element)라고도 불리며 다음 5가지 요소로 구성된다.
1)엘리먼트 이름 2)속성 3)CSS3 스타일 4)이벤트 리스너 5)콘텐츠
<p id="firstP" style="color:blue" onclick="this.style.color='violet'">
이것은 문장입니다.
</p>위의 코드에서는
p - 엘리먼트 이름 / id - 속성 / style - css3스타일 / onclick - 이벤트 리스너 / 이것은 문장입니다.- 콘텐츠(innerHTML) 라고 할 수 있음
- DOM 객체의 구성 요소(W3C의 표준)
DOM 객체는 HTML 태그의 5 요소를 그대로 반영하여 다음 5종류의 속성으로 구성된다.
1) 프로퍼티 : DOM 객체의 멤버 변수로서 HTML 태그의 속성(attribute)들을 반영
2) 메소드: DOM 객체의 멤버 함수로서 HTML 태그를 제어하는데 활용
3) 컬렉션 : 정보를 집합적으로 표현하는 일종의 배열, 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가진다
4) 이벤트 리스너 : 자바스크립트를 이용하면 직접 DOM 객체에 이벤트 리스너를 등록할 수 있다
5) css3스타일
DOM 객체들 사이의 관계
- DOM 객체들은 DOM 트리에서 부모,자식,형제의 관계로 연결되는데 이들은 다음 4개의 프로퍼티가 이용된다.
1) parentElement 프로퍼티 : 부모 객체
2) children 프로퍼티 : 직계 자식들의 컬렉션
3) firstElementChild 프로퍼티 : 첫 번째 직계 자식
4) lastElementChild 프로퍼티 : 마지막 직계 자식
- sibling이란 DOM 트리에서 동일한 레벨에 있는 모든 사촌 및 형제 DOM 객체를 지칭하는 관계이다
같은 부모의 자식이든 다른 부모의 자식이든 족보상 같은 레벨이면 모두 sibling 관계가 된다.
sibling 관계에 있는 DOM 객체들은 다음 2개의 프로퍼티로 접근한다.
1) previousElementSibling 프로퍼티 : 왼쪽 sibling 객체
2) nextElementSibling 프로퍼티 : 오른쪽 sibling 객체
- W3C에서 표준화한 DOM 객체의 주요 공통 프로퍼티,컬렉션,메소드
| 프로퍼티 | 설명 | r/w |
| id | 태그의 id속성 값 | r/w |
| lang | 태그의 lang 속성 값 | r/w |
| style | style 객체에 대한 레퍼런스 | r/w |
| title | 태그의 title 속성 값 | r/w |
| tagName | 태그 이름 문자열, 항상 대문자로 표시됨 예)SPAN,DIV | r |
| innerHTML | 시작 태그와 종료 태그 사이의 HTML 텍스트 | r/w |
| 프로퍼티 | 설명 | r/w |
| childElementCount | 자식 DOM 객체 개수 | r |
| firstElementChild | 첫 번째 자식 객체 | r |
| lastElementChild | 마지막 자식 객체 | r |
| nextElementSibling | 다음 형제 객체(오른쪽 형제) | r |
| parentElement | 부모 객체 | r |
| previousElementSibling | 이전 형제 객체(왼쪽 형제) | r |
| 프로퍼티 | 설명 | r/w |
| offsetHeight | 패딩,테두리,스크롤바를 포함한 높이 | r |
| offsetWidth | 패딩,테두리,스크롤바를 포함한 폭 | r |
| offsetLeft | 객체의 출력 위치, 수평 옵셋 | r |
| offsetTop | 객체의 출력 위치, 수직 옵셋 | r |
| 컬렉션 | 설명 |
| children | 자식 DOM 객체들의 컬렉션(자식들을 가리키는 레퍼런스 배열) |
| 메소드 | 설명 | |
| addEventListener() | 새로운 이벤트 리스너 등록 | |
| appendChild() | 마지막 자식 뒤에 새로운 자식 추가 | |
| click() | 사용자가 마우스를 클릭한 것과 동일한 작업 수행 | |
| focus() | 키 입력을 받을 수 있도록 이 객체에 포커스 지정 | |
| setAttribute() | 속성 추가 | |
| insertBefore() | 지정된 자식 앞에 새 자식 추가 | |
| querySelector() | 지정된 css3 셀렉터와 일치하는 첫 번째 자식 리턴 | |
| removeChild() | 자식 삭제 | |
| replaceChild() | 자식 대체 | |
| removeEventListener() | addEventListener()로 등록한 이벤트 리스너 제거 | |
'Front-end > Javascript' 카테고리의 다른 글
| [객체] 2. HTML DOM 객체 - 3) document 객체 (0) | 2021.01.18 |
|---|---|
| [객체] 2. HTML DOM 객체 - 2) DOM 객체 다루기 (0) | 2021.01.18 |
| [객체]사용자 객체 만들기 (0) | 2021.01.18 |
| [객체] 1. 코어 객체 - 4) Math (0) | 2021.01.18 |
| [객체] 1. 코어 객체 - 3) String (0) | 2021.01.18 |