[JS] DOM 요소에 접근하고, 속성 가져오기

문서 객체 모델(Document Object Model)

• 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
• HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM이라고 하며, XML 문서에서 사용하는 XML DOM도 있음.
• DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리함.

DOM 트리

• DOM 트리에서 가지가 갈라져 나간 항목을 노드(node) 라고 하며, DOM 트리의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 루트(root) 노드 라고 함.
• DOM 을 구성하는 기본 원칙
  (1) 모든 HTML 태그는 요소(element) 노드
  (2) HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트(text) 노드
  (3) HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드
  (4) 주석은 주석(comment) 노드

DOM 에 접근하기

• id 선택자 로 접근하는 getElementById() 메서드

  기본형 요소명.getElementById("id명")

• class 값 으로 접근하는 getElementsByClassName() 메서드

  기본형 요소명.getElementsByClassName("class명")

  • getElementsByClassName() 메서드를 사용하게 되면, 클래스 이름이 같은 DOM 요소들이 HTMLCollection 객체로 저장됨. HTMLCollection 객체는 배열과 비슷하고 배열처럼 사용할 수 있음. 하지만 배열은 아님.

• 태그 이름 으로 접근하는 getElementsByTagName() 메서드

  기본형 요소명.getElementsByTagName("태그명")

  • class나 id를 지정하지 않은 DOM요소에 접근하려면 태그를 이용.

• 다양한 방법 으로 접근하는 querySelector(), querySelectorAll() 메서드

  기본형 노드.querySelector(선택자), 노드.querySelectorAll(선택자 또는 태그)

  querySelector("#heading")	 // id="heading"인 요소
   querySelectorAll(".bright") // class="bright"인 요소 

  • DOM트리의 텍스트, 속성 노드까지 자유롭게 제어할 때 사용. id 선택자처럼 반환값이 하나라면 querySelector() 메서드를 사용하고, class 선택자나 태그 이름을 사용하여 여러 값이 한꺼번에 반환될 경우에는 querySelecorAll() 메서드를 사용.
  • 반환값은 노드이거나 노드 리스트(node list)임.

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티

기본형 요소명.innerText = 내용 , 요소명.innerHTML = 내용

속성을 가져오거나 수정하는 getAttribute(), setAttribute() 메서드

기본형 getAttribute("속성명") , setAttribute("속성명", "값")