자바스크립트 - DOM

WINDOW 객체

window 객체는 자바스크립트의 최상위 객체이며 DOM과 BOM으로 나뉜다.

BOM(Browser Object Model)

location 객체, navigator 객체, history 객체, screen 객체 등

DOM(Document Object Model)

HTML에 있는 태그를 객체화 하여 자바스크립트에서 다룰 수 있게 한 것 

모든 노드 객체에 접근할 수 있는 요소와 메소드 제공

HTML에 있는 태그를 구조화 했을때 각각의 태그가 노드

1. 요소 노드(Elements Node) : 태그 그 자체를 의미함

2. 텍스트 노드(Text Nodes) : 태그에 기록 되어있는 문자

* 텍스트 노드를 가지는 태그(h?, p)와 가지지 않는 태그(img 등)가 있음

 

DOM 탐색하기

documentElement

console.log("===== document.documentElement");
console.log(document.documentElement);

 

head

 console.log("===== document.head");
 console.log(document.head);

body

console.log("===== document.body");
console.log(document.body);

 

자식 Node 탐색

자식 노드 는 바로 아래 자식 요소를 나타냄

후손 노드 는 중첩 관계에 있는 모든 요소를 나타냄

 console.log("===== body의 자식 요소들 =====");
 console.log(document.body.childNodes);

위에서 text는 개행처리된 부분을 의미하며 만약 text를 보기싫다면

개행처리 안하고 붙여서 작성을 하여야한다.

 

 

DOM 컬렉션

childNodes는 마치 배열 같아 보이지만 배열이 아닌 반복 가능한(iterable) 유사 배열 객체인

컬렉션(collection)

for of 반복문은 사용 가능하지만 배열 메소드(pop(), push())는 쓸 수 없음

DOM 컬렌션은 읽는 것만 가능하며 childNodes[n] = 값; 이용해서 자식 노드를 교체하는 것이 불가능함

자식 노드 변경을 위해서는 별도의 메소드 필요함

 

console.log("===== for of 이용한 노드 출력 =====");
for(let node of document.body.childNodes){
console.log(node);
}

 

형제 노트 탐색

nextSibling

다음 형제 노드에 대한 정보

 console.log("===== nextSibling() 출력 =====");
 console.log(document.head.nextSibling);

 

previousSibling

이전 형제 노드의 대한 정보

 

 console.log("===== previousSibling() 출력 =====");
 console.log(document.body.previousSibling);

 

요소 간 이동

위에서 알아본 탐색 관련 프로퍼티는 모든 종류의 노드(텍스트, 요소, 주석)를 참조하지만

대부분은 요소 노드를 조작하는 작업이므로 요소 노드만 탐색하는 작업이 필요함

 

부모요소 : parentElement

자식 요소 : children, firstElementChild, lastElementChild

형제 요소 : nextElementSibling, previousSibling

 

/*
	사용 되는 html 엘리먼트
	 <ul>
        <li><a href="#">1번</a></li>
        <li><a href="#">2번</a></li>
        <li><a href="#">3번</a></li>
        <li><a href="#">4번</a></li>
    </ul>
*/


console.log("===== li의 부모 노드 =====");
 let li = document.body.children[0].children[0];
 console.log(li.parentElement);
 console.log("");

console.log("===== ul의 자식요소 =====");
let ul = document.body.children[0];
console.log(ul.children);

console.log("===== ul의 첫번째 자식요소");
console.log(ul.firstElementChild);

console.log("===== ul의 마지막 자식요소");
console.log(ul.lastElementChild);
console.log("");

console.log("===== li의 형제요소 컨트롤 =====");
console.log("li의 첫번째 요소의 다음형제 ");
console.log(ul.firstElementChild.nextElementSibling);
console.log("li의 마지막 요소의 이전형제 ");
console.log(ul.lastElementChild.previousElementSibling);