HTML요소를 동적으로 다룬다고? DOM

목차
1. DOM이란?
2. 요소를 다루는 방법
3. 동적으로 요소를 사용하는 이유 

1. DOM이란?

인터넷을 통해 여러 사이트를 들어가보면 해당 사이트에 따라 여러 이벤트나 공지사항이 슬라이드로 움직이거나 선택되는 메뉴에 따라 다른 서브 메뉴가 나타난다. 이러한 신기한 동작들을 어떻게 하는 것일까? js를 사용하면 이러한 요소들을 동적으로 움직이게 할 수 있는데 이렇게 브라우저에 움직이거나 움직일 수 있는 요소들을  DOM(Document Object Model)이라고 하며 움직이게 하는 행위를 DOM 조작이라고 한다.

 

2. 요소를 다루는 방법

js에서 DOM을 다루는 방법은 여러가지가 있다. 이제 방법을 알아보도록 하자

1) 요소(태그) 생성하기

document객체를 통해 새로운 요소를 생성할 수 있다.

document.createElement(태그이름);

ex)
//새로운 div요소 생성
const _div = document.createElement("div");

 

2) 요소 선택하기

특정 요소가 가지고 있는 값을 가져오거나 속성을 부여하는 등 여러 이유로 특정한 요소를 선택하는 방법이다.

//특정 요소를 선택하는 방법 중 하나
documnet.querySelector(선택자);

//id만을 통해 요소선택
document.getElementById(id)

//특정 클래스를 가지고 있는 요소들을 선택
document.getElementsByClassName(클래스이름)

//특정 요소들을 선택
document.getElementsByTagName(요소 이름)

ex) 
//HTML에서 div요소 모두 선택
const _div = document.querySelector("div");

//HTML에서 특정 id값을 가진 요소를 선택
const _id = document.querySelector("id");

//HTML에서 특정 class값을 가진 요소들를 선택
const _classElemnt = document.getElementsByClassName("className");

//HTML에서 태그가 div인 요소 모두 선택
const _tag = document.getElementsByTagName("div");

 

3) 클래스를 부여하거나 삭제하기

js에서 어떠한 이벤트가 발생하거나 함수 호출시 선택된 요소에 스타일이 지정된 클래스를 부여하여 동적으로 스타일이 적용될 수 있다.

//클래스 추가하기
요소.classList.add(추가할 클래스 이름)
//클래스 삭제하기
요소.classList.remove(삭제할 클래스 이름)

ex)
const _div = document.querySelector("div");

//div 요소에 컨테이너라는 이름의 클래스를 추가한다.
_div.classLsit.add("container")

//div 요소에 컨테이너라는 이름의 클래스를 삭제한다.
_div.classLsit.remove("container")

 

4) input의 값을 가져오기

우리가 원하는 글자나 숫자 등을 입력한 것도 js에서 값을 가져와 활용할 수 있다. 입력한 값을 가져와 다른 위치에 표시할 수도 있다.

const 변수명 = document.querySeletor(선택자);
const 변수명2 = 변수명.value;

ex)
//inputId라는 id를 가진 input요소를 선택
const _input = document.querySelector("inputId");
//입력된 input의 값을 inputVal이라는 변수에 할당
const inputVal = _input.value;

 

이외에도 동적으로 요소들을 조작하는 유형과 방법은 많다. 필요에 따라 원하는 조작을 할 수 있어야 한다.

3. 동적으로 요소를 조작하는 이유

사실 DOM을 조작하는 이유는 많다.  대표적인 이유 몇가지만 작성해보고자 한다.

 

1) 동적인 웹페이지 구현

웹 페이지의 기본적인 기능인 CRUD를 동적으로 활용하여 상화작용이 풍부한 요소를 웹어플리케이션을 개발할 수 있다.

 

2) 데이터 유효성 검사

서버에 데이터를 전송하기 위해 입력된 값들이 유효한 것인지 확인을 해야하는 경우도 있다. 그런 경우 DOM조작을 통해 효율적으로 입력 값들을 검사하고 서버에 전송할 수 있다.

 

3) 동적인 데이터 처리

서버에서 가져오는 데이터가 우리가 원하는 내용 이외에 불필요한 내용을 포함할 수 있다. 주어진 데이터를 가공하여 원하는 부분에 가공된 데이터를 표시할 수도 있다.