[JavaScript] DOM

(유노코딩의 자바스크립트 기초 영상을 보고 공부한 내용 정리)

---

◎ DOM이란?

브라우저는 HTML문서를 해석하고, 화면을 통해 해석된 결과를 보여준다.

해석한 HTMLZ코드를 화면을 통해 보여주는 과정을 '렌더링'이라 한다.

 

🔍 렌더링에서는 무슨 일이 일어날까?

브라우저는 HTML코드를 해석해서 요소들을 트리형태로 구조화해서 표현하는 문서(객체)를 생성한다.

이 객체를 DOM이라고 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.

 

● DOM의 존재 목적

DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의 할 수 있도록 제공되는 프로그래밍 인터페이스이다.

자바스크립트가 웹 문서에 대한 어떤 동작을 구현하고 나면, 자바스크립트 파일이 아닌 DOM에 그 결과가 반영된다.

그 내용을 토대로 웹 브라우저 화면이 다시 렌더링 된다.

 

⇨  정적인 HTML코드 대신 DOM이 사용자와 실질적으로 동적인 상호작용을 한다. 

 

 

---

●문서 인터페이스와 메서드

1. window.document

브라우저 객체 window의 document속성은 창이 포함한 문서를 참조한다.

즉, window.document는 현재 브라우저에서 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다.

+ 자바스크립트에서 window.은 생략이 가능하므로 document만 입력해도 똑같이 작동한다.

 

document는 문서에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다는 것.

 

➡︎   window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스로 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다. 

 

 

2. 요소를 선택하는 메소드

 

2-1. document.querySelector

querySelector메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다.

일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS선택자'를 의미한다.

// 요소의 속성으로 찾기
document.querySelector('div')

// class명으로 찾기
document.querySelector('.btn')

// id로 찾기
document.querySelector('#tweet')

 

2-2. document.getElementById

getElementById메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(element)를 반환한다.

일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 'id'를 의미한다.

// 기호를 따로 입력하지 않음
document.getElementById('pushButton')

 

 

3. textContent

textContent속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.

textContent를 통해 요소가 포함한 텍스트를 읽을수도, 변경할 수도 있다.

// 요소가 비어있는 경우 텍스트 삽입하기
btn.textContent = '버튼'

// 요소의 텍스트 가져오기
btn.textContent // 버튼

// 텍스트 변경하기
btn.textContent = 'Button'