[JS] Element 선택(querySelector/ getElementById)

element 찾기

Document.querySelector('셀렉터') 셀렉터에 해당하는 요소 찾기

Document.getElementById(id) 일치하는 id 찾기

element.className class 이름을 문자열로 반환

element.classList() class 이름을 DOMTokenList로 반환(공백으로 구분된 토큰 집합)

 

class 추가하기

element.className += ' 이름' (공백 필요)

element.classList.add('이름') (공백 불필요)

 

class 삭제/수정

element.classList.remove() 제거하기. ','로 구분하여 여러값 한번에 삭제 가능

DOMTokenList.replace(A, B) A를 B로 변경

DOMTokenList.toggle(token[, force]) 있으면 제거, 없으면 추가. force=false면 제거만 되고 추가되지 않음

 

textContent, innerText, innerHTML 비교

Node.textContent 모든 text를 가져옴

HTMLElement.innerText hidden처리된 text를 제외하고 가져옴

Element.innerHTML 해당 요소 안의 모든 내용을 가져옴. html을 읽거나 바꿀 수 있음. xss 공격에 취약

 

event

EventTarget.addEventListener(eventType, listener, (options/useCapture))

• EventTarget: Element, Document, Window 등
• eventType: animation, click 등
• listener: null, handleEvent() method, JS함수 중 하나여야함

 

event.target

: 이벤트가 발생한 대상 요소(특정 태그)

 

 

 

 

2022.11.01