불로구
자바스크립트 - HTML DOM & Document 본문
HTML DOM 객체
- 브라우저는 HTML 페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다!
- HTML DOM 이란 HTML 문서의 각 요소를 객체화한 것이다
- HTML 태그를 동적으로 제어하려면 HTML DOM에 대해 알고 있어야 한다.
DOM의 목적
- HTML 태그가 출력된 모양과 콘텐츠 제어
DOM 트리
- HTML 태그의 포함 관계에 따라 DOM 객체들을 트리 구조로 만든다. 이것을 DOM 트리라고 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>하이요~</p>
<div>
<button type="button">버튼1</button>
<button type="button">버튼2</button>
</div>
</body>
</html>
위 소스의 DOM 트리는 2번째 사진과 같다!
HTML 태그마다 하나의 DOM 객체가 생성된 것을 볼 수 있고, HTML 태그의 포함 관계에 따라 DOM 객체들이
부모 자식의 계층 관계로 구성됨을 볼 수 있다.
DOM 트리 특징
- DOM 트리의 root는 document 객체이다, 하지만 document는 DOM 객체가 아니다
- DOM 객체의 종류는 HTML 태그 종류만큼 많다!
- HTML 태그 당 DOM 객체가 하나씩 생성
- DOM 트리는 HTML 태그의 포함관계에 따라 부모 자식 관계로 구성
DOM 객체의 태그 요소
- DOM 객체는 HTML 태그의 속성이 그대로 반영
1) 엘리먼트 이름
2) 속성
3) CSS3 스타일
4) 이벤트 리스터
5) 콘텐츠
※시작 태그와 종료 태그 사이에 포함된 HTML 콘텐츠를 innerHTML이라고 한다!
DOM 객체의 구성 요소
1) 프로퍼티 : DOM 객체의 멤버 변수로서 HTML 태그의 속성을 반영
2) 메소드 : DOM 객체의 멤버 함수로서, HTML 태그 제어
3) 컬렉션: 정보를 집학적으로 표현하는 일종의 배열
4) 이벤트 리스터 : 이벤트
5) CSS3 스타일 : 스타일
DOM 객체들 사이의 관계
1) parentElement - 부모 객체
2) children - 직계 자식들의 컬렉션
3) firstElementChild - 첫 번째 직계 자식
4) lastElementChild - 마지막 직계 자식
5) previousElementSibling - 동일 레벨 왼쪽 sibling 객체
6) nextElementSibling - 동일 레벨 오른쪽 sibling 객체
DOM 객체 구분, id 속성
- HTML 페이지 내에 같은 HTML 태그가 여러 개 있으면 id 속성 값으로 구분
<p id="ks">hello</p>
<p id="us">hello</p>
DOM 객체 찾기
- document.getElementById()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="hello">하이요~</p>
<div>
<button type="button">버튼1</button>
<button type="button">버튼2</button>
</div>
<script>
let c = document.getElementById("hello");
c.style.backgroundColor = "red";
</script>
</body>
</html>document.getElementById("hello")를 통해 hello의 속성값을 c에 담고,
c 변수의 style을 통해 배경색을 red로 변경!
- getElementsByTagName() : 동일한 HTML 태그 이름을 가진 DOM 객체를 모두 찾아 컬렉션을 만들어 리턴
컬렉션은 [ ]와 인덱스를 이용하여 각 원소를 접근할 수 있다
- getElementsByClassName() : 동일한 class 이름을 가진 DOM 객체를 모두 찾아 컬렉션을 만들어 리턴
innerHTML 프로퍼티
- DOM 객체의 innerHTML 프로퍼티는 시작 태그와 종료 태그 사이에 들어 있는 HTML 콘텐츠를 나타내는 문자열 정보이다.
p 태그의 id 값을 c에 넣고 text에 c.innerHTML의 정보를 넣어 출력해보면
<p></p>사이의 HTML 텍스트를 읽을 수 있다.
혹시나 궁금한 점은 댓글로 남겨주세요!
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 자바스크립트 - 이벤트, 이벤트 리스너, 익명 함수 (0) | 2020.06.25 |
|---|---|
| 자바스크립트 - DOM 객체 생성, 삽입, 삭제 (0) | 2020.06.22 |
| 자바스크립트 - 배열 & Array (0) | 2020.06.18 |
| 자바스크립트 - 객체 & 코어객체 (0) | 2020.06.18 |
| 자바스크립트 - 식별자, 데이터 타입, 변수 (0) | 2020.06.18 |
