[JavaScript] DOM 조작하기

DOM(The Document Object Model)이란, 문서의 요소들을 객체로 제공하여 다른 프로그래밍 언어에서 접근하고 조작할 수 있는 방법을 제공하는 API를 말합니다.

 

DOM을 조작할 때는 아래 순서를 따라야합니다.

1. 조작 하고자 하는 요소를 선택
2. 선택된 요소의 콘텐츠 또는 속성을 조작

---

DOM 선택

• document.querySelector()
  • 제공한 선택자와 일치하는 element 한 개 선택
    ⇒ 제공한 선택자를 만족하는 첫 번째 element 객체를 반환 (없다면 null 반환)
• document.querySelectorAll()
  • 제공한 선택자와 일치하는 element 여러 개 선택
    ⇒ 제공한 선택자를 만족하는 NodeList 반환

---

DOM 조작

DOM 조작은 크게 아래 4가지로 분류할 수 있습니다.

• 속성 조작
  • 클래스 속성 조작
  • 일반 속성 조작
• HTML 콘텐츠 조작
• DOM 요소 조작
• 스타일 조작

---

속성 조작

클래스 속성 조작

• Element.classList.add()
  • 지정한 클래스 값을 추가
• Element.classList.remove()
  • 지정한 클래스 값을 제거
• Element.classList.toggle()
  • 클래스가 존재한다면 제거하고 false를 반환
  • (존재하지 않으면 클래스를 추가하고 true 반환)

일반 속성 조작

• Element.getAttribute()
  • 해당 요소에 지정된 값을 반환 (조회)
• Element.setAttribute(name, value)
  • 지정된 요소의 속성 값을 설정
  • 속성이 이미 있으면 기존 값 갱신 (그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됨)
• Element.removeAttribute()
  • 요소에서 지정된 이름을 가진 속성 제거

---

HTML 콘텐츠 조작

• Element.textContent = '내용 수정'
  • 요소의 HTML 콘텐츠를 수정

---

DOM 요소 조작

• document.createElement(tagName)
  • 작성한 tagName의 HTML 요소를 생성하여 반환
• Node.appendChild()
  • 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입
  • 추가된 Node 객체를 반환
• Node.removeChild()
  • DOM에서 자식 Node를 제거
  • 제거된 Node를 반환

---

style 조작

• Element.style.color = 'crimson'
  • 요소의 색깔 설정

• Element.style.fontSize= '2rem'
  • 요소의 폰트 크기 설정

• Element.style.border = '1px solid black'
  • 요소의 border 스타일 설정

style의 경우, 모든 스타일에 대해 위 형식을 통해 적용 가능합니다.