** 동영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
1. DOM(document object model)이란?
- html문서의 모든 요소를 의미합니다.
- 자바스크립트는 HTML DOM을 사용하여 모든 요소에 접근할 수 있습니다.
- 위 그림처럼 조직도처럼 연결된 것이 DOM이라고 할 수 있습니다.
- HTML DOM을 사용하면 노드 관계를 사용하여 노드 트리를 탐색할 수 있습니다.
2. DOM Node란?
- W3C HTML DOM 표준에 따르면 HTML문서의 모든 것은 노드입니다.
- document는 문서 노드입니다.
- 모든 HTML요소는 요소 노드입니다.
- HTML 요소 내부의 텍스트는 텍스트 노드입니다.
- 모든 HTML태그의 속성은 속성 노드입니다.
- 모든 주석은 주석 노드입니다.
- html태그는 루트 노트(root node)입니다.
## 코드 예시
<html>
<head>
<title>오쌤의 니가스터디</title>
</head>
<body>
<h1>자바스크립트 강좌</h1>
<p>오늘은 HTML DOM Node를 배워봅시다!</p>
</body>
</html>- 예를 들어 위와 같은 코드가 있다고 보도록 하겠습니다.
- <html>은 root node입니다.
- <html>은 부모를 가지고 있지 않습니다.
- <html>은 <head>와 <body>의 부모입니다.
- <head>는 <html>의 첫번째 자손입니다.
- <body>는 <html>의 마지막 자손입니다.
- <head>는 <title>이라는 자손을 한개 가지고 있습니다.
- <title>의 자손은 text node입니다. 값은 "오쌤의 니가스터디"입니다.
- <h1>과 <p>는 형제관계(siblings)입니다.
3. Node 간의 탐색
- 아래 제시하는 노드속성을 사용하여 자바스크립트로 노드 사이를 탐색할 수 있습니다.
| 노드 속성 종류 | 설명 |
| parentNode | 선택된 문서객체의 부모노드선택 |
| childNodes[노드번호] | 선택된 문서객체의 자손노드선택 - 여러개일 수 있으므로 배열로 선택 |
| firstChild | 선택된 문서객체의 첫번째 자손노드선택 |
| lastChild | 선택된 문서객체의 마지막 자손노드 선택 |
| nextSibling | 선택된 문서객체의 바로 다음(동생) 동위요소 노드 선택 |
| previousSibling | 선택된 문서객체의 바로 이전(형) 동위요소 노드 선택 |
1) parentNode
- 선택된 문서객체의 부모노드를 선택합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
<style>
div{ width: 300px; padding: 10px; border: 3px solid black;}
</style>
</head>
<body>
<div id="box">
<h1 id="h1">제목태그</h1>
<p id="p">문단태그</p>
</div>
<script>
//1. 문서객체 변수에 담기
var box = document.getElementById('box');
var h1 = document.getElementById('h1');
var p = document.getElementById('p');
//2. 부모노드 선택
h1.parentNode.style.backgroundColor = 'yellow';
</script>
</body>
</html>
## 코드 결과
2) childNodes[노드번호]
- 선택된 문서객체의 자손노드를 순번으로 선택합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
<style>
div{ width: 300px; padding: 10px; border: 3px solid black;}
</style>
</head>
<body>
<div id="box">
<h1 id="h1">제목태그</h1>
<p id="p">문단태그</p>
</div>
<script>
//1. 문서객체 변수에 담기
var box = document.getElementById('box');
var h1 = document.getElementById('h1');
var p = document.getElementById('p');
//2. 자손노드 개수확인
var num = box.childNodes.length;
console.log(num);
var text = box.childNodes[0].textContent;
console.log(text);
box.childNodes[1].style.color = 'red';
box.childNodes[3].style.color = 'blue';
</script>
</body>
</html>
## 코드 결과
- 자식노드의 개수를 확인했는데 2개가 아니라 5개가 나오는 것을 확인할 수 있습니다.
## 현재 문서의 노드 순번
- 요소 사이의 공백도 자손으로 인정되서 자손의 개수가 5개로 처리됩니다.
- 그래서 짝수들은 대부분 공백입니다.
- 홀수가 실제 요소들로 인정되는 부분입니다.
- 요소만 세고 싶었다면 [childElementCount]라는 속성을 쓰면 2개로 반환됩니다.
3) firstChild/lastChild
- 선택된 문서객체의 첫번째자손/마지막자손을 선택합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
<style>
div{ width: 300px; padding: 10px; border: 3px solid black;}
</style>
</head>
<body>
<div id="box">
<h1 id="h1">제목태그</h1>
<p id="p">문단태그</p>
</div>
<script>
//1. 문서객체 변수에 담기
var box = document.getElementById('box');
var h1 = document.getElementById('h1');
var p = document.getElementById('p');
box.firstChild.textContent = '첫번째공백';
box.lastChild.textContent = '마지막공백';
</script>
</body>
</html>- 위에서 본 순서대로 공백도 포함되기 때문에 첫번째 자손은 첫번째 공백입니다.
- 마지막 자손은 마지막 공백으로 처리가 됩니다.
## 코드 결과
4) firstElementChild/lastElementChild
- 요소로 직접적으로 선택하고자 한다면 노드가 아니라 요소로 선택합니다.
- 선택된 문서객체의 첫번째요소자손/마지막요소자손을 선택합니다.
## 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
<style>
div{ width: 400px; padding: 10px; border: 3px solid black;}
</style>
</head>
<body>
<div id="box">
<h1 id="h1">제목태그</h1>
<p id="p">문단태그</p>
</div>
<script>
//1. 문서객체 변수에 담기
var box = document.getElementById('box');
var h1 = document.getElementById('h1');
var p = document.getElementById('p');
box.firstElementChild.textContent = '첫번째 요소 텍스트 변경';
box.lastElementChild.textContent = '마지막 요소 텍스트 변경';
</script>
</body>
</html>
## 코드 결과
4. Node Lists
- 요소 사이에는 공백이 발생되면서 그것도 노드로 인식하는 것을 확인했습니다.
- 그래서 문서객체 선택을 여러개로 하는 것에서 에러가 발생되기도 합니다.
- 예를 들어 [getElementsByClassName()], [getElementsByTagName()], [querySelectorAll()]과 같은 메서드 입니다.
## 에러 없는 선택 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
</head>
<body>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<script>
//1. 문서객체 변수에 담기
var h1 = document.querySelectorAll('.text');
h1[0].style.color = 'red';
h1[1].style.color = 'green';
h1[2].style.color = 'blue';
</script>
</body>
</html>
## 에러 없는 선택 코드 결과
## 에러 나는 선택 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
</head>
<body>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<script>
//1. 문서객체 변수에 담기
var h1 = document.querySelectorAll('.text');
var c = ['red','green','blue'];
for(var i in h1){
h1[i].style.color = c[i];
}
</script>
</body>
</html>
## 에러 나는 선택 코드 결과
- 색상이 처리는 되지만 에러가 발생되는 것을 확인할 수 있습니다.
- 여러 객체를 선택하는 경우(querySelectorAll()같은 메서드를 사용한 경우) HTML Collection을 반환하는 대신 Node List로 노드로 처리되기 때문에 태그 사이마다 공백이 발생되어 있는 것도 선택되기 때문입니다.
## for in문 대신 for문으로 length로 처리한 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - DOM Node</title>
</head>
<body>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<h1 class="text">제목태그</h1>
<script>
//1. 문서객체 변수에 담기
var h1 = document.querySelectorAll('.text');
var c = ['red','green','blue'];
for(var i=0;i<h1.length;i++){
h1[i].style.color = c[i];
}
</script>
</body>
</html>
## for in문 대신 for문으로 length로 처리한 코드 결과
- length속성은 문서객체의 노드에서 공백을 뺀 진정한 노드수만 반환합니다.
- 그래서 코드가 오류없이 잘 나오는 것을 확인할 수 있습니다.
'웹언어 > JAVASCRIPT' 카테고리의 다른 글
| [JS강좌] 26강 자바스크립트 정규표현식(RegExp) - 오쌤의 니가스터디 (0) | 2021.06.18 |
|---|---|
| [JS강좌] 25강 자바스크립트 Forms - 오쌤의 니가스터디 (0) | 2021.06.17 |
| [JS강좌] 23강 이벤트객체의 속성과 메서드 - 오쌤의 니가스터디 (0) | 2021.06.15 |
| [JS강좌] 22강 DOM - 문서객체이벤트 - 오쌤의 니가스터디 (0) | 2021.06.12 |
| [JS강좌] 21강 DOM - 문서객체생성 - 오쌤의 니가스터디 (0) | 2021.06.12 |
