[front] DOM

awarduuu·2022년 5월 1일

DOM

: 문서 객체 모델이라는 뜻으로, HTML, XML 문서의 프로그래밍 인터페이스이다.
이는 문서의 구조화된 표현을 제공하며, 프로그래밍언어가 DOM구조에 접근할 수 있는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있게 도와준다.

API (web or XML page) = DOM + JS

위의 식은 프론트엔드 개발구조를 간단히 정리한 식으로, JS라는 프로그래밍언어를 이용해 문서의 구성 요소인 DOM을 조작하여 API를 구성한다는 뜻이다.

DOM 조작법

getElementBy

// 태그네임으로 dom객체 접근하는 함수
const $body = document.getElementByTagname('body'); 
// $body 변수에 'body' tag를 가진 모든 dom element가 유사배열 형태로 할당된다.

// 클래스네임으로 dom객체 접근하는 함수
const $container = document.getElementByClassname('container');
// $container 변수에 class='container' 인 모든 dom element가 유사배열 형태로 할당된다.

// id로 dom객체 접근하는 함수
const $title = document.getElementById('title');
// $title 변수에 id='title'인 모든 dom element가 유사배열 형태로 할당된다.

querySelector

// ()안에 들어갈 값을 CSS처럼 접근한다.

// <body> element 접근
const $body = document.querySelector('body')

// class='city'인 dom element 접근
const $container = document.querySelector('.container');

// id='title'인 dom element 접근
const $title = document.querySelector('#title');

innerHTML

// 첫번째 <body></body> 안의 dom element을 가져온다
const $boty_html = $body[0].innerHTML;

innerText

// 첫번째 <body></body> 안의 text 값을 가져온다
const $body_text = $body[0].innerText;

createElement

// element를 생성하는 함수
const $list = document.createElement('ul');
// $list = `<ul></ul>`;

insertAdjacentHTML

// insertAdjacentHTML(position, text);
// text를 배치하는 함수

// postion : beforebegin => $body element 앞에
$body.insertAdjacentHTML('beforebegin', $list);

// position : afterbegin => $body element 안에 가장 첫번째 child
$body.insertAdjacentHTML('afterbegin', $list);

// position : beforeend => $body element 안에 가장 마지막 child
$body.insertAdjacentHTML('beforeend', $list);

// position : afterend => $body element 뒤에
$body.insertAdjacentHTML('afterend', $list);

classList

: add, remove 함수를 통해 클래스값을 추가, 삭제한다.

// $Cities element에 class='city'를 지정
$Cities.classList.add('city');

// $Cities element에 class='city'를 삭제

$Cities.classList.remove('city');

setAttribute

: element에 속성값을 추가해주는 함수

// $Cities element에 name='cities' 속성 추가
$Cities.setAttribute('name', 'cities');

getAttribute

: element 속성값을 가져오는 함수

// $Cities element의 'name' 속성 값을 가져옴

const cities = $Cities.getAttribute('name');

배열 변환

: dom으로 가져온 값들은 모두 유사배열 형태이기 때문에 배열함수를 쓰기 위해서 배열로 바꾸어주어야한다.

// html 
<ul id='classList'>
  <li>Seoul</li>
  <li>Tokyo</li>
  <li>London</li>
</ul>

const $CityList = document.getElementById('cityList');
const $cities = $CityList.getElemnetByTagname('li');
// $cities = [`<li>Seoul</li>`, `<li>Tokyo</li>`, `<li>London</li>`] 형태로 저장되지만 배열은 아니다.

// 1. 전개연산자로 지정하는 방법

const cities = [...$cities];
// 유사배열의 각 아이템에 접근하여 다시 순서대로 배열에 할당해준다.

// 2. Array.from

const cities = Array.from($cities);
// 유사배열을 배열로 바꾸어준다.