목차
- DOM
1-1. 문서 객체
1-2. 노드 요소 노드, 텍스트 노드 - DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색
2-1. DOM 컬렉션 NodeList
2-1. DOM 탐색 프로퍼티 <html>, <head>, <body>
2-2. 자식 노드 탐색
2-3. 형제 노드 탐색
2-4. 부모 노드 탐색 - DOM 요소 탐색 요소 노드만 탐색
3-1. 자식 요소 탐색 HTMLCollection(숫자)
3-2. 형제 요소 탐색
3-3. 부모 요소 탐색
1. DOM
1-1. 문서 객체
DOM(Document Object Model)은 문서 객체 모델을 의미한다.
- HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있도록 만든다.
- 모든 노드 객체에 접근할 수 있는 요소 및 메소드를 제공한다.
1-2. 노드 요소 노드, 텍스트 노드
❗ 구조화 : <html> 태그 안에 <head>, <body>가 있고, 또 한 번 그 <body>에 <h1>, <p>가 들어있듯 구조를 갖춘 것을 말한다.
- HTML 문서 내 태그들을 트리 형태로 구조화했을 때 존재하는 각각의 태그를 노드(node)라고 부른다.
- 요소 노드 및 텍스트 노드라는 개념으로 나누어 보면 다음과 같다.
요소 노드(elements node)
- <h1>, <p> 등 태그 그 자체를 의미한다.
텍스트 노드(text node)
- 태그에 기록돼 있는 내부문자를 일컫는다.
- 즉 텍스트 노드를 가지는 태그(h?, p 등)와 가지지 않는 태그(img 등)가 있다.
2. DOM 노드 탐색 텍스트 노드, 요소 노드 모두 탐색
2-1. DOM 컬렉션 NodeList
- 노드리스트(NodeList)는 마치 배열 같은 모양새를 보이지만,
배열이 아니라 반복 가능한(iterable) 유사 배열 객체인 컬렉션(collection)이다.
<body>
<script>
// for of 반복문을 사용한 반복
for(let node of document.body.childNodes) {
console.log(node);
}
// 배열 메소드 사용 불가
//console.log(document.body.childNodes.pop());
</script>
</body>- 인덱스를 활용할 수 있고, for of 반복문 통한 출력 역시 가능하지만,
배열 메소드는 쓰일 수 없다. - DOM 컬렉션은 읽는 것만 수행할 수 있고,
childNodes[i] = 값;과 같이 자식 노드를 교체하는 일은 불가하다. 위 예시에서도 정의된 function이 아니라는 오류 메시지를 보인다: pop is not a function - 자식 노드 변경 위해서는 별도 메소드 사용이 요구된다.
2-1. DOM 탐색 프로퍼티 <html>, <head>, <body>
| document.documentElement | <html> |
| document.head | <head> |
| document.body | <body> |
- documnet 객체가 가진 속성 dcumentElement로 접근할 경우 전체 <html> 태그가 출력된다.
- 마찬가지로 head, body에 대해 호출하면 현재 문서의 <head> 태그와 <body> 태그가 반환된다.
2-2. 자식 노드 탐색
❗ 자식 노드(child node)는 바로 아래 자식 요소를, 후손 노드(descendants)는 중첩 관계에 있는 모든 요소를 일컫는다.
| childNodes | 자식 노드들 |
| firstChild | 첫 번째 자식 노드 |
| lastChild | 마지막 자식 노드 |
childsNodes
console.log("===== body의 자식 노드들(childNodes) =====");
console.log(document.body.childNodes);
- <body> 태그의 childNodes를 묻자 NodeList가 리턴됨을 알 수 있다.
- 이때 태그간 개행(\n) 역시 text로 인식돼 사이사이에 고유 인덱스를 가지고 삽입된 모습이다.
firstChild, lastChild
//ul 태그 노드에 접근 -- ul이 가진 childNodes 출력
console.log(document.body.childNodes[15].childNodes);
console.log(document.body.childNodes[15].firstChild); //링크1
console.log(document.body.childNodes[15].lastChild); //링크3- index [15]에 해당하는 <ul> 태그의 childNodes를 가져와 본다.
<body>
<!-- 일반적 작성에 따라 개행한 경우 -->
<ul>
<li><a href="#">링크1</a></li>
<li><a href="#">링크2</a></li>
<li><a href="#">링크3</a></li>
</ul>
<!-- firstChild, lastChild 출력 위해 개행을 없앤 경우 -->
<ul><li><a href="#">링크1</a></li>
<li><a href="#">링크2</a></li>
<li><a href="#">링크3</a></li></ul>
</body>- 사실 이때도 <ul> 태그와 그 안의 <li> 태그 사이에 줄바꿈이 있었다면
firstChild와 lastChild는 #text 라는 값만을낼 뿐 원하는 결과를 가져오지 못한다. - 따라서 위 예시에서처럼 <ul> 태그와 <li> 태그간에 개행을 삭제하는 수정이 필요하다. 비로소 링크1이 firstChild, 링크3이 lastChild로 읽힐 것이다.
2-3. 형제 노드 탐색
| nextSibling | 다음 형제 노드 |
| previousSibling | 이전 형제 노드 |
console.log(document.head.nextSibling); //body
console.log(document.body.previousSibling); //head- <head>의 종료태그와 <body>의 시작태그가 개행 없이 붙어있다는 전제하에, <head>의 다음 형제 노드는 <body>가 된다. 즉 개행이 발생하고 텍스트 노드(text node)가 자리잡으면 각각 서로의 다음 형제/이전 형제로 올바르게 읽히지 못한다.
- 마찬가지로 <body>의 이전 형제 노드는 <head>로 판단된다.
2-4. 부모 노드 탐색
| parentNode | 부모 노드 |
console.log(document.head.parentNode); //html
console.log(document.body.parentNode); //html- <head> 태그의 부모이자 <body> 태그의 부모는 <html>이다.
3. DOM 요소 탐색 요소 노드만 탐색
❗ 앞서 다룬 DOM 노드 탐색 프로퍼티들은 모든 종류의 노드(텍스트 노드 및 요소 노드)를 참조하기에 원하는 결과를 얻기 위해 개행을 임의로 수정하는 등의 번거로움이 따랐다. 사실 그러한 특성은 따로 활용될 데가 있을 것이다. 대신에 요소 노드만 탐색하기 위해서는 앞으로 기술할 요소 탐색 노드를 활용하면 된다.
3-1. 자식 요소 탐색 HTMLCollection(숫자)
| children | 자식 요소들 |
| firstElementChild | 첫 번째 자식 요소 |
| lastElementChild | 마지막 자식 요소 |
for(let elem of document.body.children) {
console.log(elem);
}- DOM 노드 탐색 시에 개행 자리마다 생겼던 text는 생략된 결과를 볼 수 있다.
- 해당되는 요소 노드만 결과로서 반환한다.
console.log(document.body.children); //HTMLCollection(20)
console.log(document.body.children[7].firstElementChild); //링크1
console.log(document.body.children[7].lastElementChild); //링크3- 특히 children을 검색하자 유사 배열 형태인 HTMLCollection(숫자)가 결과로 나온다.
- firstElementChild, lastElementChild 역시
개행 유무와 상관 없이요소 목록만 읽어들여 의도한 값들을 알맞게 가져옴을 알 수 있다.
3-2. 형제 요소 탐색
| nextElementSibling | 다음 형제 요소 |
| previousElementSibling | 이전 형제 요소 |
console.log(document.body.children[7].firstElementChild.nextElementSibling); //링크2
console.log(document.body.children[7].lastElementChild.previousElementSibling); //링크2- 형제 요소 탐색 시에도 개행과는 관계 없이 요소 목록만을 파단해 다음 형제 요소/이전 형제 요소에 대한 값을 읽어온다.
3-3. 부모 요소 탐색
| parentElement | 부모 요소 |
- 부모 요소에 대해서도 탐색할 수 있다.
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 주요 노드 프로퍼티 | innerHTML | textContent | value (0) | 2022.02.21 |
|---|---|
| [JavaScript] 요소 검색 메소드 | querySelector | NodeList (0) | 2022.02.21 |
| [JavaScript] 숫자 | 문자 | 날짜 | 객체 메소드 (0) | 2022.02.20 |
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
| [JavaScript] 배열 | for of | forEach | map | Array 객체 메소드 (0) | 2022.02.18 |
