SEB[JS/브라우저 : DOM]

Jogi's 코딩 일기장·2021년 7월 6일

부트캠프 22~23일차를 통해서 JS/브라우저에서 DOM 대해서 공부를 했다. DOM은 컴퓨터 공학을 배우면서 처음 배운 개념이었다. html과 css, javascript를 자주 안 쓴 나에게는 생소하지만 그래도 꽤 편리한 개념이었다. 그래서 이번에는 DOM에 대한 개념 정리와 하면서 느낀점들을 풀어보겠다.

DOM(Document Object Model)

DOM은 위와 같은 단어들의 약자로, HTML을 바라보는 또 하나의 관점이며, 이 관점은 프로그래머의 관점이라고 할 수 있겠다. 또한 HTML 요소를 Object(javascript Object)처럼 조작할 수 있는 Model이다. 즉, 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있다는 것과 같다.

HTML에 자바스크립트 적용하기

HTML에 javascript를 적용하기 위해서는 <script> 태그를 이용한다.
```
<script src = "파일명.js"></script>
```
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML을 잠시 멈추어 <script>요소를 먼저 실행한다.
<script>태그를 추가하는 방법에는 대표적으로 두 가지가 있다.
- <head> 안 쪽에 삽입하는 경우
- </body>태그가 끝나기 전에 삽입하는 경우
- HTML은 위에서부터 아래로 진행하기 때문에 <head>에서 삽입하는 경우 내가 원하는 것을 얻어오지 못할 수가 있기 때문에, 보통은 </body>태그가 끝나기 전에 삽입한다.

자식 엘리먼트 찾기

자바스크립트에서 DOM은 document 객체에 구현돼 있다.
DOM구조를 조회할 때는 console.dir(document.'태그명')이 유용하다. console.log와 다르게 객체의 모습으로 출력을 한다.
console.dir을 통해 출력된 객체에서, children 속성을 찾을 수 있다
```
document.body.children // 여기서의 태그는 body이다.
```
따로 변수선언을 해서 정보를 저장해두면, 주소를 참조하기 때문에 언제든지 접근할 수 있다.

부모 엘리먼트 찾기

let parentElement = node_name.parentElement;

위와 같은 코드를 통해서 알 수 있다.

DOM 순회하기

DOM은 트리 구조를 이루고 있다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러개 가지고 있고, 부모가 하나인 구조가 반복되는데, html에서는 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성할 수 있다. 내가 생각하기로는 DFS나 BFS를 사용하면 조회를 할 수 있지 않을까 싶다.

DOM으로 HTML 조작하기

CREATE - createElement(엘리먼트 만들기)

const el = document.createElement('div');

위와 같이 엘리먼트를 만들 수 있다. 위의 엘리먼트는 'div'라는 태그를 가진 엘리먼트를 생성한 것이다. 이것을 통해 엘리먼트를 만들면 APPEND를 통해 트리 구조에 연결해야 한다.

APPEND - append, appendChild

const el = document.createElement('div');
document.body.append(el);

를 통해서 body에 엘리먼트를 연결한 것이다. body의 자식으로 연결을 한 것이라고 볼 수 있다. 여기에서는 내용이 추가되지 않았다. 내용을 추가하기 위해서는 UPDATE의 textContent를 통해 문자열을 입력할 수 있다.

READ - querySelector, querySelectorAll

querySelector

여기에, 예를들어 '.tweet'을 첫 인자로 넣으면, 클래스 이름이 tweet인 HTML 엘리먼트 중 첫 엘리먼트를 조회할 수 있다.

querySelectorAll

여러 개의 엘리먼트를 가져오기 위해서는 이를 사용해야 한다. 이것을 통해 얻은 엘리먼트들은 배열처럼 for문을 사용해서 조회할 수 있다.
```
const tweets = document.querySelectorAll('.tweet');
```
get을 통한 DOM 조희 메소드도 존재한다.
```
getElementById or getElementsByClassName
```

UPDATE - textContent, ClassList.add

기존에 생성한 빈 div 태그를 업데이트 하여, 다양한 작업이 가능하다.

textContent를 이용해서, 빈 div에 문자열을 입력할 수 있다.

const tweet = document.querySelector('#tweet');
tweet.textContent = '(내용)';

CSS 스타일링이 적용될 수 있도록 엘리먼트에 class를 추가할 수 있다.
```
tweet.classList.add('tweet')
```
이 후에는 append를 통해 container의 자식 요소로 추가한다.
element.setAttribute(name, value)는 클래스와 id말고 다른 attribute를 추가하는 방법이다.

DELETE - remove, removeChild

삭제하려는 엘리먼트의 위치를 알고 있는 경우 remove를 사용한다.
- 만들어 주었던 엘리먼트를 삭제하는 경우
```
tweet.remove(); // tweet은 만들어준 엘리먼트이다.
```
여러 개의 자식 엘리먼트를 지우려면 innerHTML을 이용할 수도 있다. 하지만 이는 보안에서 몇몇 문제점이 있으며, 이를 대처하기 위해 removeChild가 존재한다.
```
document.querySelector('#container').innerHTML = ''; //이렇게 하면 컨테이너 안의 내용들이 다 지워진다.
```
removeChild는 자식을 지정해서 삭제하는 메소드다. 모든 자식 엘리먼트들을 삭제하기 위해서는 반복문을 활용한다.
```
const container = document.querySelector('#container');
while(container.firstChild) {
	container.removeChild(firstChild);
}
```

이벤트 객체

이벤트란 웹사이트에서 일어나는 클릭, 드래그, 키보드 입력 등의 일들이 발생하는 것을 말한다,
사용자가 버튼을 클릭하면, 그 버튼의 textContent or innerHTML을 이용해 컨텐츠를 가져올 수 있다. 이는 사용자가 누르는 것에 따라 출력이 달라지므로, 클릭된 이벤트 객체에서 내용을 가져온다.
따라서, 이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체이다.
event는 이벤트가 발생했을 때 객체 자체를 말하며, event.target은 MDN 정의에서는 event객체에 대한 참조하고 한다. 나 같은 경우는 그 객체에서의 엘리먼트라고 생각하고 정리를 했다.

사용법

let btn = document.querySelector('#login-btn'); //모든 버튼을 가져옵니다.
btn.onclick = function() {
	~~~  // 방법 1
}
btn.addEventListener("click", function(){
	~~~ // 방법 2
});

실습

이번 실습은 DOM을 활용하여 회원가입 창에서 필요한 유효성 검사를 하는 프로그램을 짜는 실습이었다. 우선 결과창부터 보여주겠다.

우리가 고려해야 할 부분은 아이디 부분에서는 아이디 글자가 4글자 이상이어야 하며, 비밀번호에서는 비밀번호와 비밀번호 확인을 비교하여 일치하는지를 시각적 피드백을 주는 것이었다. 나머지는 내가 페어와 함께 이것저것 해보며 구현한 것이다.(전화번호와 회원가입을 눌렀을 때 이벤트)

아이디

실습에서는 대부분 onkeyup을 통해 이벤트와 이벤트핸들러를 구성해주었다. 함수에서 글자 수를 확인하고, 그 조건에 맞게 우리에게 피드백이 올 수 있도록 해주었다.

비밀번호

비밀번호는 비밀번호에 해당하는 value와 비밀번호 확인에 해당하는 value를 인자로 삼아 비교를 해주는 함수를 사용했다. 이는 같은지만을 비교하면 되기 때문에 어렵지 않게 구현할 수 있었다.

전화번호

전화번호 또한 아이디 때와 비슷하게 짜주면 됐었는데, 이 때는 받아온 값이 숫자로만 구성돼있는지가 중요했다. 그래서 isNaN을 통해 숫자가 아닌지를 판단하고, 길이를 판별하고, 앞이 010으로 시작되는지를 판단해서 boolean 형태로 리턴을 해줄 수 있도록 했다.

회원가입하기 버튼

이는 alert를 이용해 메시지가 뜨도록 했다. 위에서 구현한 아이디와 비밀번호 유효성 검사를 통해 통과가 되면 회원가입이 됐다는 메시지를 띄우고, 그렇지 않다면 다시 입력하라는 문구를 내주도록 했다.

결과물

유효성 검사를 만족하면 회원가입을 할 수 있지만, 만족하지 못하면 입력을 더해줘야하는 것을 볼 수 있다.

마치며

이번에는 DOM이라는 것에 대한 개념을 배우고 실습에서 이를 이용해서 javascript를 통해 html을 조작하는 실습을 했다. 이번에는 오히려 CSS를 건드리지 않아서 조금 더 수월하게 했지않나 싶다. 앞으로 이를 더 많이 사용할 것이라고 들었는데 DOM에 대해서 더 이해하고 사용하는 방법을 잘 익혀야 할 것 같다. 확실히 챕터가 진행될수록 해야할 것과 난이도가 상승하는 것이 느껴진다. 계속 느끼는 것이지만 실습을 열심히 하면서 배웠던 것들을 잘 사용할 수 있도록 하는 것이 중요할 것 같다. 다음은 react를 배운다는데 잘 배워보자..

Reference

코드스테이츠 강의 자료

Jogi's 코딩 일기장

프로그래머로서의 한걸음

이전 포스트

SEB[JS/Node : 핵심개념, 문법]

다음 포스트