JavaScript - DOM API

Document Object Model
웹 문서를 제어하기 위해 문서를 객체화 한 것
다양한 메서드를 통해 웹 문서를 조작할 수 있다.

HTML 요소 선택

document 키워드는 HTML 전체를 선택한다.

• document.getElementById()
  해당 아이디의 요소를 선택
• document.getElementsByClassName()
  해당 클래스에 속한 요소를 모두 선택
• document.getElementsByName()
  해당 name 속성값을 가지는 요소를 모두 선택
• document.getElementsByTagName()
  해당 태그명을 가진 요소 모두 선택
• document.querySelectorAll()
  해당 CSS 선택자로 선택되는 요소를 모두 선택
• document.querySelector()
  해당 CSS 선택자로 선택되는 요소 중 첫 번째 요소 선

document.getElementsByClassName()와 같이 요소 여러개를 선택하는 메서드는 요소들을 담은 배열을 반환한다.

HTML 요소 조작

요소 수정

• textContent - HTML 태그를 모두 제거하고 순수한 텍스트 데이터만 제공
• innerHTML - HTML 태그를 그대로 제공

속성 제어하기

• setAttribute
  요소에서 주어진 이름의 속성값을 입력
• getAttribute - 요소에서 주어진 속성의 값을 가져옴.
• removeAttribute - 요소에서 주어진 이름의 속성을 제거

HTML 요소 스타일링

• style
<style>태그의 속성들을 직접 수정

element.style.color = "red";
element.style.backgroundColor = "blue";

• classList
  class를 직접 수정

element.classList.add("red");
element.classList.remove("red");

HTML 요소 생성

• createElement
  지정한 태그명의 HTML 요소를 생성
• appendChild
  항상 마지막 자식 요소로 추가하므로, 삽입할 요소만 매개변수로 제공
• insertBefore
  첫번째 파라미터로 온 요소를 두번째 파라미터의 요소 앞에 추가한다.

document.querySelector("ul").insertBefore(myLi, myFirstItem);

• remove
  해당 요소 제거
• parentNode
  해당 노드의 부모 반환