[JavaScript] DOM

DOM (문서 객체 모델, Document Object Model)

• 웹 페이지를 문서 객체로 조작하고 관리할 수 있는 인터페이스

 

DOM 사용 방법

 

• JS에서 DOM에 접근하는 경우 요소를 선택, 추가, 수정, 삭제하는 메서드와 속성에 접근 가능
• C(Create), R(UD

 

DOM 조작 방법

1) DOMContentLoaded

• JS 내에서 문서 객체를 조작할 때 사용
• HTML의 모든 문서 구조(내용)가 모두 로드된 이후에 이벤트 발생

(기본구조)

document.addEventListener('DOMContentLoaded', () => {
  // 해당 위치에 DOM 조작 코드를 작성
})

2) 문서 객체 가져오기

• 전체 HTML 구조를 객체로 인식하여 속성을 가져옴
• document.body / document.head 처럼 읽어오기 가능

3) querySelector() & querySelectorAll() 메서드

• head 요소와 body 요소 내부에 생성한 다른 요소들을 읽어올 때 사용

4) getElementById('아이디명')

• 주어진 ID를 가진 요소를 찾아 해당 요소를 반환
• ID의 경우 문서 내에서 유일 (# 기호 없이 아이디명만 문자열로 전달)

 

DOM 수정하기

1) 글자 조작하기

• 문서객체.textContent → 입력한 문자열을 그대로 넣기
• 문서객체.innerHTML → 입력된 문자열을 HTML 형식으로 넣기

2) 속성 조작하기

• 문서객체.setAttribute(속성이름, 값) → 특정 속성에 값을 지정
• 문서객체.getAttribute(속성이름) → 특정 속성을 추출

3) 스타일 조작하기

• 문서객체.style.속성 = '값'

1. 문서 객체 생성

• createElement('문서객체명') 메서드 사용
• 문서 객체는 생성한 뒤 '배치' → DOM 트리 구조 내부에 삽입
• 부모객체.appendChild(자식객체) 메서드 → 선택된 부모 요소의 자식 요소 리스트의 마지막에 새로운 요소를 추가

document.addEventListener('DOMContentLoaded', () => {
  // 문서 객체 생성
  const header = document.createElement('h1');

  // 생성된 태그 조작
  header.textContent = '문서 객체를 동적으로 생성';
  header.setAttribute('data-custom', '사용자 정의 속성');
  header.style.color = 'white';
  header.style.backgroundColor = 'black';

  // h1 태그를 DOM 요소 내부에 추가(body 태그 아래에 추가)
  document.body.appendChild(header);

2. 문서 객체 이동

• appendChile() 메서드를 사용하여 문서 객체 이동
• 문서 객체의 부모는 반드시 하나여야 함
• 문서 객체를 다른 문서 객체에 추가하는 경우 문서 객체가 이동

   const divA = document.querySelector('#first');
    const divB = document.querySelector('#second');

    const h2 = document.createElement('h2');
    h2.textContent = '이동하는 h2 태그';

    const toFirst = () => {
      divA.appendChild(h2); // 추가와 동시에 이동
      setTimeout(toSecond, 1000);
    }
    
    const toSecond = () => {
      divB.appendChild(h2); // 추가와 동시에 이동
      setTimeout(toFirst, 1000);
    }
    toFirst();
});

3. 문서 객체 제거

• 부모객체.removeChile(자식객체) 메서드 사용

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const h3 = document.querySelector('h3');

    document.body.removeChild(h3);

    // 해당요소.parentNode : 해당 요소의 부모 객체를 지정
    h3.parentNode.removeChild(h3);
  }, 3000)
})