2023.05.30
DOM에 대한 이론 정리
01. DOM#1 돔을 아십니까?
출처 : https://www.youtube.com/watch?v=CFgXIJ3RZ50
💡 DOM = Document Object Model
: HTML을 JavaScript가 이해할 수 있는 의미있는 NODE 객체로 바꿔서 추가적인 기능을 할 수 있도록 한 것
parse : 문자를 의미있는 객체의 형태로 바꾸는 것
traverse : 원하는 요소를 찾는 것
DOCUMENT_NODE
: HTML 문서 전반에 대한 정보를 나타냄
ELEMENT_NODE
: element = html 태그
📌 알아두면 좋은 Element Nodes
createElement()
tagName
children
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
classList()
dataset
attributes
✨ classList()
element.classList.toggle("hello");
element.classList.add("bye");
element.classList.remove("hello");➡ classList()에서 기본적으로 제공하는 메서드 : toggle, add, remove
➡ classList()는 class 추가, 제거 등을 하므로 위의 코드처럼 . 을 적을 필요가 없음
✨ DOM이 있는 이유는 ?
➡ 지속적으로 바뀌는 상태를 파악해서 유저에게 보여주는 UI를 변경할 때 필요함
02. DOM#2 이벤트도 모른다구?
출처 : https://www.youtube.com/watch?v=it46nEygRcM
💡 DOM 이벤트
: 사용자가 어떤 행동을 하면 로직을 짜서 처리해주는 것
브라우저의 이벤트는 어떠한 상황이 발생했을 때 어떻게 처리해주겠다고 하는 함수를 작성해서 연결하는 역할을 한다.
- event handler = event listener = event 콜백 함수
가장 보편적인 함수는 addEventListener() 이다.
(정교하게 컨트롤할 수 있는 이벤트를 제공함)
element.addEventListener("click", function(){~}, false);➡ 위의 코드 분석
element : 누구에게 이벤트가 발생할 것인가?
"click" : 클릭이라는 행동을 하면
function( ){~} : 이러한 행동을 하겠다.
➡ addEventListener의 경우에는 3개의 인자를 받음
1번 : 이벤트의 type (ex. click, scroll 등)
2번 : 이벤트의 handler (ex. function( ){ })
3번 : 어떻게 컨트롤할 것인지에 대한 옵션 (ex. true, false 등)
📌 알아두면 좋은 event
load : 파일을 모두 업로드했을 경우에 브라우저가 방출을 하는 것
scroll : 유저가 스크롤 중
resize : 유저가 화면 사이즈를 줄이고 키울 때
blur : 어떠한 요소를 포커스시키고 다른 요소들은 블러처리하고 싶은 경우
focus : 어떠한 요소를 포커스하거나 클릭한 상태인 경우
change : input 요소나 textarea의 값이 바뀐 경우
submit : submit 버튼을 누른 경우
click : 유저가 click을 한 경우
mousedown : 마우스가 눌린 상태인 경우
mouseenter : 어떤 요소에 마우스가 진입한 경우
mouseleave : 어떤 요소에 마우스가 진입했다가 나가는 경우
mouseup : mousedown에 따라서 손이 뜰 때
keydown, keyup : 특정 키를 누른 경우 (ex. ESC 키를 누른 경우 팝업 창이 사라짐)
touchstart, touchmove, touchend : 모바일에서 터치를 한 경우
03. DOM#3 캡처/버블 순살치킨
출처 : https://www.youtube.com/watch?v=7gKtNC3b_S8
💡 EventFlow
: 이벤트가 있는 경우에 도미노 형식으로 실행됨
- currentTarget : 이벤트의 진짜 주인
- target : 이벤트의 시발점
- capture phase (propagate up)
: 이벤트는 브라우저에서 가장 가까운 요소부터 시작되는 과정
(html > body > div) - target phase
: 이벤트가 시작되는 당사자 - bubble phase (propagate down)
: capture와는 반대로 이벤트 당사자에서 가장 가까운 요소부터 시작되는 과정
(div > body > html)
💻 문제
➡ div 태그 하나 눌렀는데 html과 body의 event는 2번 반복됨
= capture phase와 bubble phase에서 모두 실행됨
= currentTarget과 target이 불일치함
➡ 이러한 경우에는 어느 단계에서 실행되고 싶은지 선택 가능
(기본값은 bubble phase)
04. DOM#4 이벤트 객체 맨날 써?
출처 : https://www.youtube.com/watch?v=SbSAlxw9Lz8
💡 stopPropagation()
: 이 함수가 작성되면 이후의 이벤트들은 모두 멈추게 됨
➡ capture 단계에서 stopPropagation()을 사용하면 target과 bubble 단계에서는 이벤트가 멈춤 (특이한 케이스)
💡 이벤트 객체
: 이벤트 핸들러를 사용하면 브라우저는 무조건 이벤트 객체를 넣어줌
이벤트 객체는 해당 이벤트와 연관된 정보를 모은 것을 의미함
(보통은 e, evt, event 등을 사용함)
💡 preventDefault()
: form 등의 페이지를 보낼 때 값을 확인하고 보내는 용도로 사용함
05. DOM#5 드롭다운 20분 컷 가능?
출처 : https://www.youtube.com/watch?v=OSFTXX_ex7I
➡ form에서 event를 사용하는 것을 찾으려면 currentTarget을 이용하고, 여기서 값이 궁금하다면 currentTarget 뒤에 value를 붙여주면 값이 console에 찍힌다.
06. DOM#6 드롭다운 10분 컷 ㅎ
출처 : https://www.youtube.com/watch?v=X0bf0hfE3qA
➡ blur : focus가 해제되는 찰나의 순간
// html에 있는 필요한 class 이름들 모두 불러오기
const dropdown = document.querySelector(".dropdown")
const toggleButton = document.querySelector(".dropdown-toggle")
const menu = document.querySelector(".dropdown-menu")
const options = document.querySelectorAll(".dropdown-option")
const nextButton = document.querySelector(".next-button")
// 토글 버튼이 클릭되면 메뉴를 클릭
// 메뉴의 maw-height가 0
// 메뉴.show -> 해지
toggleButton.addEventListener("click", function(){
// 토글 버튼을 클릭하면 menu에 show가 없으면 추가, 있으면 냅두기
menu.classList.toggle("show");
})
toggleButton.addEventListener("blur", function(){
// 선택했던 것을 해제시켜줌
menu.classList.remove("show");
})
// 동일한 모든 옵션들에게 적용됨(foreach : 반복)
options.forEach(function(item){
item.addEventListener("click", function(e){
const buttonLabel = e.currentTarget.textContent.trim()
toggleButton.textContent = buttonLabel
toggleButton.classList.add("selected")
nextButton.removeAttribute("disabled")
})
})아직까지는 많이 부족해서 강의를 들으면서 실습을 했지만, DOM에 대해서 잘 알고 나서 실습을 하니까 쉬웠던 것 같다.
