DOM, 이벤트

DOM

DOM(Document Object Model)은 웹 페이지의 구조화된 표현으로, 자바스크립트를 사용하여 웹 페이지의 콘텐츠와 구조를 동적으로 조작할 수 있음

DOM 요소 선택

getElementById() ➡️ ID로 요소 선택
  let element = document.getElementById('myId'); 

getElementsByClassName() ➡️ 클래스 이름으로 요소 선택
  let elements = document.getElementsByClassName('myClass'); 

getElementsByTagName() ➡️ 태그 이름으로 요소 선택
  let elements = document.getElementsByTagName('div'); 

querySelector() ➡️ CSS 선택자를 사용하여 첫 번째 일치 요소 선택
let elements = document.querySelector('.myClass'); 

querySelectorAll() ➡️ CSS 선택자를 사용하여 모든 일치 요소 선택
let elements = document.querySelectorAll('.myClass'); 

DOM 요소 속성 조작

setAttribute() : 속성 추가/수정
  element.setAttribute('class', 'newClass');

removeAttribute() : 속성 제거
  element.removeAttribute('class');

속성 접근
  element.id = 'newId';
  element.className = 'newClass';

DOM 요소 스타일 조작

style : 스타일 설정
element.style.color = 'red';
element.style.fontSize = '20px';

이벤트 처리

addEventListener() ➡️ 이벤트 리스너 추가
  element.addEventListener('click', function() {
  alert('Element clicked!');
  });

removeEventListener() ➡️ 이벤트 리스너 제거
  function handleClick() {
	alert('Element clicked!');
  }
  element.addEventListener('click', handleClick);
  element.removeEventListener('click', handleClick);

코드 예시

// 문서객체를 찾을 때
const h1El = document.querySelector("div > h1"); // 1개
// const h1El = document.querySelector(".bye"); // css class이름으로 선택자 찾기
// 문서 객체 콘텐츠 바꾸는 법
h1El.innerHTML = "<i>손흥민</i>"; // children 까지 다 보여줌
h1El.innerText = "손흥민"; // 태그를 text 취급
// 스타일 주는 법
h1El.style.color = "red";
h1El.style.fontSize = "130px";
// 클래스 추가하는 법
h1El.classList.add("active");
// 클래스 제거하는 법
h1El.classList.remove("bye");
// 클래스 토글하는 법
h1El.classList.toggle("done"); //
h1El.classList.toggle("done"); //
// input value 가져오는 법
const inputEl = document.querySelector("input");
console.log(inputEl.value);
console.log(h1E1);
document.querySelectorAll("h1"); // 여러개
// 이벤트
// 사용자가 웹 페이지의 특정 요소와 상요작용할 때 발생하는 것
// 1. 이벤트 타겟 -> 이벤트가 발생한 요소
// 2. 이벤트 타입 -> click, keydown, keyup, mouseover
// 3. 이벤트 핸들러 -> 이벤트가 발생했을 때 실행할 코드
// 4. 이벤트 등록 -> 이벤트 타깃에, 이벤트 타입과 이벤트 핸들러 동작을 등록하는 것을 의미
const inputEl = document.querySelector("iput");
inputEl.addEventListener(이벤트타입, 이벤트핸들러);
inputEl.addEventListener("keydown", function (ev) => {
  console.log("keydown");
  console.log(ev);
  console.log("keydow");
});
const buttonEl = document.querySelector("button");
buttonEl.addEventListener("click", function(ev) {
	console.log(this);
	console.log(ev);
	console.log("click");
})