[JavaScript] - 기본 문법 (5)

🚀 DOM

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

1️⃣ 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'); 
  

2️⃣ DOM 요소 생성 및 추가

• createElement() ➡️ 요소 생성

    let newElement = document.createElement('div');
    newElement.textContent = 'Hello, World!';
  

• appendChild(), insertBefore() ➡️ 요소 생성

    document.body.appendChild(newElement);
  

3️⃣ DOM 요소 속성 조작

• setAttribute() ➡️ 속성 추가/수정

    element.setAttribute('class', 'newClass');
  

• removeAttribute() ➡️ 속성 제거

    element.removeAttribute('class');
  

• 속성 접근

    element.id = 'newId';
    element.className = 'newClass';
  

4️⃣ DOM 요소 스타일 조작

• style ➡️ 스타일 설정

    element.style.color = 'red';
    element.style.fontSize = '20px';
  

5️⃣ 이벤트 처리

• addEventListener() ➡️ 이벤트 리스너 추가

    element.addEventListener('click', function() {
  alert('Element clicked!');
    });
  

• removeEventListener() ➡️ 이벤트 리스너 제거

    function handleClick() {
  alert('Element clicked!');
    }
    element.addEventListener('click', handleClick);
    element.removeEventListener('click', handleClick);