[javascript] DOM API

1. DOM 이란?

DOM은 브라우저가 HTML 문서를 해석해 만들어낸 트리 구조로, 자바스크립트를 통해 그 구조에 접근하고 조작할 수 있도록 해주는 인터페이스!

웹 브라우저는 HTML 문서를 불러온 다음 이렇게 요소들 간의 상하관계를 한 눈에 볼 수 있도록 트리구조로 나타낸다! 태그 요소 하나하나들을 다 노드라고 부른다

2. DOM API

DOM API를 이용하여 요소들을 조작한다!

(1) document.getElementById()

id 속성을 사용하여 요소를 찾고 단일 요소를 반환한다!

let $color = document.getElementById("color");
console.log($color);

<div id="color">갈색</div> 출력

(2) document.querySelector()

특정 요소의 id가 아닌, css 선택자로 요소 노드를 반환!
querySelector의 괄호 안에는 특정 요소의 태그 이름을 작성하고, class 이름을 통해 특정 요소를 찾는다면 .을, id를 통해 특정 요소를 찾는다면 #을 작성한 후 class 값 혹은 id 값을 작성!

let $animalInfo = document.querySelector('div.animal-info');
let $age = document.querySelector('div#age');

console.log($animalInfo);
console.log($age);

<div class="animal-info">
  <div id="name">강아지</div>
  <div id="color">갈색</div>
  <div id="age">2살</div>
</div>
<div id="age">2살</div>

출력

(3) document.querySelectorAll()

전달받은 class의 이름을 갖고 있는 여러 요소들을 전부 찾아 반환!!!

let $infoItem = document.querySelectorAll('div.info-item');
console.log($infoItem);

노드리스트로 반환한다!

(4) document.getElementByClassName()

css 선택자가 아닌 class 이름만으로 여러 요소들을 찾는다!!

let $infoItem = document.getElementsByClassName('info-item');
console.log($infoItem);

HTMLCollection 안에 클래스 이름이 info-item인 세 개의 요소들이 전부 출력

(5) document.getElementByTagName()

태그 이름을 통해 요소들을 찾을 수 있다!

let $div = document.getElementsByTagName("div");
console.log($div);

(6) createElement

새로운 요소 노드 생성

let $type = document.createElement('div');
$type.className = 'info-item';
$type.id = 'type';
$type.textContent = '말티즈';

console.log($type);

<div class="info-item" id="type">말티즈</div> 생성

(7) appendChild

전달받은 노드를 원하는 요소의 마지막 자식으로 추가 가능

let $button = document.createElement('button');
$button.id = 'new-button';
$button.classList.add('new-button');
$button.textContent = '버튼';

let $animalInfo = document.querySelector('div.animal-info');
$animalInfo.appendChild($button);
console.log($animalInfo);

(8) addEventListener

let $button = document.createElement('button');
$button.id = 'new-button';
$button.classList.add('new-button');
$button.textContent = '버튼';
$button.addEventListener('click', () => {
    window.alert('클릭');
});

let $animalInfo = document.querySelector('div.animal-info');
$animalInfo.appendChild($button);
console.log($animalInfo);

click, scroll, mouseover 등 많은 이벤트가 있다

(9) innerHTML

let $animalInfo = document.querySelector('div.animal-info');
$animalInfo.innerHTML = '<div id="name">고양이</div>';

console.log($animalInfo);