[JavaScript] DOM과 DOM API

📌 DOM(Document Object Model)

 

📌 DOM API

: Document Object Model Application Programming Interface

 

✅ querySelector("요소 선택자")

CSS 요소 선택자를 사용해서 자신이 가져오고 싶어하는 요소를 가져오는 메소드

문서에서 만나는 제일 첫번째 요소를 반환함

 

✅ getElementById("id")

ID 이름을 불러서 해당 ID를 가지는 요소를 불러오는 메소드

 

✅ classList

classList.add('class1') : 선택 요소에 class1이라는 class 더하기 

classList.remove('class1') : 선택 요소에 class1이라는 class 제거 

classList.contains('class1') : 선택 요소에 class1이라는 class 포함하고 있는지 확인

let boxEl = document.querySelector(".box");
boxEl.classList.add("active");
console.log(boxEl.classList.contains("active")); //true
boxEl.classList.remove("active");
console.log(boxEl.classList.contains("active")); //false

 

✅ addEventListener(이벤트, 명령)

선택 요소에 지정한 이벤트가 발생하면, 약속 된 명령어를 실행시키는 메소드

let boxEl = document.querySelector(".box");

boxEl.addEventListener("click", function () {
  alert("Add event listener");
});

// 메소드 체이닝 사용
document.querySelector(".box").addEventListener("click", function () {
  alert("Add event listener");
});

✔️ addEventListener 이벤트 종류

 

• click: 클릭
• mouse 계열 
  • mouseover : 요소에 커서를 올렸을 때 
  • mouseout : 마우스가 요소를 벗어날 때 
  • mousedown : 마우스 버튼을 누르고 있는 상태 
  • mouseup : 마우스 버튼을 떼는 순간 
• focus : 포커스가 갔을 때 
• blur : 포커스가 벗어나는 순간
• key 계열 
  • keypress : 키를 누르는 순간 + 누르고 있는 동안 계속 발생
  • keydown : 키를 누르는 순간에만 발생
  • keyup : 키를 눌렀다가 떼는 순간
• load : 웹 페이지에 필요한 모든 파일(HTML, CSS, JS 등)의 다운로드가 완료 되었을 때
• resize: 브라우저 창의 크기가 변경 될 때 
• scroll: 스크롤이 발생할 때 
• unload: 링크를 타고 이동하거나, 브라우저를 닫을 때
• change: 폼 필드의 상태가 변경 되었을 때 

 

✅ setAttribute("속성명", "지정할 속성")

HTML 요소 속성 추가

선택한 요소의 속성 값을 직접 지정할 수 있는 메소드

let boxEl = document.querySelector(".box");
let inputEl = document.getElementById("input");
boxEl.addEventListener("click", function () {
  // inputEl.setAttribute("placeholder", "통합검색");
  // inputEl.setAttribute("type", "button");
  inputEl.setAttribute("type", "password");
});

 

✅ textContent

선택한 요소의 textcontent 값 변경할 수 있음

let boxEl = document.querySelector(".box");
boxEl.addEventListener("click", function () {
  boxEl.textContent = "hi";
});

 

✅ querySelextorAll("요소 선택자")

문서에 존재하는 모든 요소를 찾아주는 메소드

모든 요소를 가져와서 배열(같은) 데이터로 만들어 줌