JS 선행(DOM API)

DOM API
(Document Object Model Application Programming Interface)

DOM은 문서 객체 모델(Document Object Model)을 의미하며 HTML, XML 문서의 프로그래밍 interface이다.

DOM은 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서의 구조, 스타일, 내용 등을 변경할 수 있게한다.

 

그렇다면 DOM 구조는 무엇일까?

DOM은 위의 이미지처럼 Tree형식의 자료구조로 되어있어 DOM 트리라고도 한다.

Tree에서 위쪽의 노드를 부모노드, 아래쪽 노드를 자식노드라고 부르며,

최상단의 부모노드가 없는 노드를 Root(뿌리) 노드라고 하고

반대로 자식노드가 없는 노드를 Leaf(잎) 노드라고 부른다.

node : tree구조에서 모든 개체들을 node라고 부른다.
태그뿐 아니라 태그 안의 텍스트나 속성 등도 모두 node에 포함된다.

 

문서 객체는 일반적으로 웹브라우저가 HTML 페이지를 읽으며 생성되는 것이다.

이런 과정은 정적으로 문서객체를 생성한다고 할 수 있다.

반대로 HTML페이지에 없던 문서객체를 JavaScript를 이용해 생성할 수 있는데 이런과정을 동적으로 문서 객체를 생성한다고 말한다.

 

JavaScript는 DOM을 통해 웹페이지에 접근하고 페이지를 수정할 수 있다.

DOM은 웹페이지(HTML)와 스크립팅언어(JavaScript)를 서로 연결해주는 역할을 한다.

JavaScript의 document 객체는 HTML 문서를 가리키므로 document 객체를 이용하여 HTML에 접근한다.

DOM의 각 노드와 상호작용을 위한 인터페이스로 정적인 웹페이지(HTML)을 수정하기 위해 사용하는 것이 DOM API이다.

 

document. 으로 조작 가능한 DOM API

https://www.w3schools.com/jsref/dom_obj_document.asp

HTML DOM Document Objects

element. 으로 조작가능한 DOM API

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Objects

 

▶ 유용한 DOM API 목록

querySelector()	HTML 요소(Element) 검색/찾기 (첫번째 노드 반환)
querySelectorAll()	HTML 요소(Element) 모두 검색/찾기 (모든 요소 반환)
addEventListner()	이벤트 핸들러 등록.
getElementById()	해당 Id속성을 가진 요소를 반환.
getElementsByClassName()	해당 class속성을 가진 요소들을 반환.
tagName	요소의 태그명을 반환.
textContent	요소의 텍스트 내용을 설정하거나 반환.
classList	요소의 클래스 정보 add(추가), remove(삭제), contains(조회) 등

---

DOM API 연습해보기

 

1) querySelector()

// 문서 내의 클래스 이름이 box인 요소 중 첫번째 요소를 boxEl 변수에 저장.

const boxEl = document.querySelector('.box');

 

2) addEventListner(1,2) : 요소에 특정 이벤트(동작) 발생 시 실행할 함수(핸들러) 생성.

// boxEl 요소를 클릭 시 'click' 반환.

boxEl.addEventListner('click', function () { //addEventLister('이벤트', '핸들러') 형태로 작성.

   console.log('click');

});

 

3) classList : 요소의 클래스정보 객체 활용

// boxEl 요소의 class에 'active' 추가.

boxEl.classList.add('active');

 

// boxEl에 class 값으로 active가 들어있는지 확인하고 true/false 여부를 isContains 변수에 저장.

let isContains = boxEl.classList.contains('active'); //위에서 add하였으므로 true 값 반환.

consle.log(isContains);                            //true 반환.

 

//boxEl 요소의 class에 'acitve' 제거.

boxEl.classList.add('active');

 

// boxEl에 class 값으로 active가 들어있는지 확인하고 true/false 여부를 isContains 변수에 저장.

let isContains = boxEl.classList.contains('active'); //위에서 remove하였으므로 false 값 반환.

consle.log(isContains);                           //false 출력.

 

4) querySelectorAll

// 문서 내의 클래스 이름이 box인 모든 요소를 boxEl 변수에 저장.

const boxEls = document.querySelectorAll('.box');

 

4-1) forEach(1,2)

: querySelectorAll()은 복수의 요소를 가지고 오기때문에 찾은 요소들에 반복적으로 실행할 함수 표현.(주로 배열에 적용)

아래예제에서 forEach의 매개변수 1은 의미적으로 단수의 개념을 적용하기위해 boxEl로 명시.(매개변수 2 번호 : index)

// boxEls(배열) 각각의 데이터에 반복하여 중괄호 { } 내의 함수 실행.

boxEls.forEach('boxEl', index () {     //forEach('반복중인요소', '반복중인번호') 형태로 작성.

// 각각의 boxEls 요소(boxEl)의 class 값 추가. ( order- (index-1) )

 boxEl.classList.add(`order-${index+1}`);  // `(백틱/그레이브)을 이용해 보간함.

 console.log(index, boxEl);   // <div class="box order-1"></div> 방식으로 출력됨

});

 

5) textContent

const boxEl = document.querySelector('.box');

// Getter, 요소의 텍스트 값을 얻는 용도

console.log(boxEl.textContent); //요소 안에 들어있는 텍스트값 출력.

// Setter, 요소의 텍스트 값을 지정하는 용도 (텍스트 수정 가능)

boxEl.textContent='Ester';   //요소 안에 들어있는 텍스트 값을 Ester로 지정.

console.log(boxEl.textContent);  // Ester 출력.