엘리스 자바스크립트 3주차 이벤트리스너, DOM (1)

DOM이란?

DOM이란 (Document of Model)의 약자로 직역하면 문서.객체.모델 이다.
즉, 웹페이지에 대한 인터페이스라고 보면된다. 여러 프로그램들이 페이지 콘텐츠 그리고 구조 스타일을 읽고 조작할 수 있도록하는 매개체이다.

HTML 요소의 선택

메소드	설명
.getElementById()	해당 아이디의 요소를 선택
.getElementsByClassName()	해당 클래스에 속한 요소를 선택
.getElementsByName()	해당 name 속성값을 가지는 요소를 선택
.querySelectorAll()	해당 선택자로 선택되는 요소를 모두 선택
.querySelector	해당 선택자로 선택되는 요소 1개 선택

HTML 요소의 생성

메소드	설명
.createElement()	지정된 HTML 요소를 생성

HTML 이벤트 핸들러 추가

속성	설명
.onclick = function(){}	마우스 클릭 이벤트와 연결될 이벤트 핸들러

DOM요소의 선택

메소드	설명
.getElementsByTagName('li')	HTML <li> 요소를 선택
.getElementById('id')	아이디가 'id'인 요소를 선택
.getElementsByClassName('odd')	클래스가 'odd'인 요소를 선택
.getElementsByName('first')	해당 속성값이 'first'인 요소를 선택

DOM요소의 스타일 변경

// 아이디가 "div"인 요소를 선택
let div1 = document.getElementById("div");
// 선택된 요소의 텍스트 색상 변경
div1.style.color = "orange"

DOM요소의 내용 변경

// 아이디가 "text"인 요소를 선택
let div1 = document.getElementById("text");
// 선택된 요소의 텍스트 색상 변경
div1.innerHTML = "내용을 바꾸자";

EventListener

이벤트 타입 : (폼, 키보드, 마우스, HTML DOM, Window 객체 등)

이벤트 핸들러 처리

누르면 바뀌게

'누르면 바뀌게'라는 문제는 button을 눌렀을 시
[버튼을 눌러주세요] color : white
-> 함수 동작시 버튼변경 / class를 추가해 색상도 변경
[버튼 클릭 성공!] color : skyblue
로 바꿔주는 문제이다.

let btn = document.getElementById("btn");
// 1. JS가 HTML의 DOM을 읽어서 btn 이라는 ID를 가진 요소를 가져온다. (이걸 변수에 저장)

// 3. JS가 click action을 확인하면,  btn 요소에 class를 추가한다.

// 4. CSS는 btn 요소에 class 가 추가됐으니 이를 읽어서 색을 적용한다.
function changeColor(){

    btn.classList.add("changeColor");
    
    btn.innerText = "버튼 클릭 성공!"
}

// 2. JS가 변수에 저장된 DOM에 Listener를 추가한다.

btn.addEventListener("click",changeColor);

이 문제를 풀면서 DOM의 역할과 HTML, JS에 대해서 다시 한번 생각해보는 계기가 되었다.
페이지 검사를 통해 이벤트리스너"click"을 했을 시 DOM의 구조를 확인 해본결과
부모button 밑으로 들어갈 줄 알았던 class가 btn과 함께 class명이 들어 간 것이였다.
DOM동작에 대해서 다시 생각해보게 되는 문제였다.

쇼핑 리스트

아이템 추가 창에 텍스트를 입력받을 때 쇼핑리스트에 추가하고 삭제하는 웹앱을 만드는 문제이다.

문제를 풀면서
e.preventdefault()
라는 것은 왜 사용이 될까 궁금했다.

e.preventdefault()

1. a태그를 눌렀을 때 href링크로 이동하지 않게 할 경우
2. form안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고 싶을 경우 (submit은 작동한다.)
   -> "쇼핑 리스트" 문제에서는 2번이 해당된다.

강의 후 깨달음

JS와 DOM은 잘 구분해서 생각해야한다.
DOM동작이 헷갈린다면 페이지 검사를 들어가서 DOM동작을 확인해보자.

• 클래스 추가 : ____.classList.add("기존 클래스명")
• 클래스 이름 변경 : ____.className = "클래스명"
• div나 li같은 태그(돔)들은 JS에서 .createElement()로 생성해야한다.
• e.preventdafault() : submit 이나 a태그 처럼 클릭 이벤트 사용할 때는 꼭 작성해줘야한다.