[JavaScript] DOM

DOM이란 HTML 문서의 요소들을 계층으로 표현하여 조작할 수 있게끔 해주는 인터페이스를 의미한다. 즉, 한마디로 모든 HTML 요소들은 HTML DOM을 통해서 접근할 수 있고, 조작 및 제어할 수 있다.

 

문서와 요소

HTML 문서 객체를 의미하는 document는 모든 HTML 요소들을 포함하는 최상위 객체를 의미한다.

 

요소 선택

HTML 문서의 요소를 선택하기 위해서 사용할 수 있는 document의 메서드는 다음과 같다.

• getElementById() : 아이디로 요소 선택
• getElementsByClassName() : 클래스로 요소 선택
• getElementsByTagName() : 태그 이름으로 요소 선택
• getElementsByName() : name 속성을 요소 선택
• querySelector() : 선택자로 요소 선택
• querySelectorAll() : 선택자로 선택되는 요소를 모두 선택

 

getElementById()

인자로 전달된 문자열과 동일한 id 속성 값을 가진 단일 요소를 선택한다.

// <h2 id="title">Hello</h2>

const hello = document.getElementById('title');
console.log(hello);

 

getElementsByClassName()

인자로 전달된 문자열과 동일한 class 속성 값을 가진 요소를 모두 선택한다.

// <h2 class="title">Hello</h2>
// <h3 class="title">World</h3>

const hello = document.getElementsByClassName('title');
console.log(hello);

 

getElementsByTagName()

인자로 전달된 문자열과 동일한 태그를 사용하는 요소를 모두 선택한다.

// <div>One</div>
// <div>Two</div>
// <div>Three</div>

const divs = document.getElementsByTagName('div');
console.log(divs);

 

getElementsByName()

인자로 전달된 문자열과 동일한 name 속성 값을 가진 요소를 모두 선택한다.

// <input type="text" name="user">
// <input type="text" name="user">

const inputs = document.getElementsByName('user');
console.log(inputs);

 

querySelector()

인자로 전달된 선택자와 일치하는 첫 번째 요소를 선택한다. 이때 사용되는 선택자는 CSS 선택자이므로, 태그 선택자를 사용하려면 태그명을 작성해야 하고, 아이디 값으로 찾으려면 앞에 # 기호를 붙여 작성하며, 클래스 값으로 찾으려면. 기호를 붙여 작성해야 한다.

// <h2>hello</h2>
// <div id="world">world</div>
// <span class="number">1</span>

const h2 = document.querySelector('h2');
const world = document.querySelector('#world');
const number = document.querySelector('.number');

 

querySelectorAll()

인자로 전달된 선택자와 일치하는 요소들을 모두 선택한다.

 

요소 변경

앞서 살펴본 메서드들을 사용해 선택된 특정 요소는 속성 값, 스타일 등의 내용을 변경할 수 있다.

// <h2>hello</h2>

const title = document.querySelector('h2');

title.innerText = '안녕하세요';
title.style.color = 'red';

 

요소 생성

HTML 문서에 존재하지 않는 요소를 새로 생성하기 위해서는 createElement()를 사용한다. 또한 이렇게 생성한 요소를 실제 문서에 추가하기 위해서는 HTML이 가지고 있는 특정 요소에 appendChild()를 사용해 붙여 주어야 한다.

// <div></div>

const h2 = document.createElement('h2');
h2.innterText = 'hello world';
h2.style.color = 'blue';

const div = document.querySelector('div');
div.appendCHild(h2);