231205 (JavaScript)

돔 개념

• 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법
• 웹 문서를 구조화한 DOM 트리와 이벤트 등을 정리해 좋은 표준방식

웹에서 자바스크립트를 사용하는 이유

• 조건이 주어지거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것.
• 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다.
• (예) 웹 문서에 텍스트와 이미지가 들어 있다면 웹 브라우저는 마크업 정보를 보면서 텍스트 단락이 몇 개이고 그 내용이 무엇인지 살펴본다
• 이미지가 몇 개이고 이미지 파일 경로는 어떠한지 대체 텍스트는 무엇인지도 파악해서 이미지별로 정리해서 인식한다.
• 텍스트와 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별해서 인식해야 한다.
• 마크업을 보면서 요소 사이의 포함 관계도 알아야 한다.

DOM 트리

• 웹 문서에 있는 요소들 간의 부모, 자식 관계를 계층 구조로 표시하는 것
• 나무 형태가 되기 때문에 DOM 트리라고 함
• 노드(node) : DOM 트리에서 가지가 갈라져 나간 항목
• 루트 노드(root node) : DOM 트리의 시작 부분(html)

DOM은 문서의 요소 뿐만 아니라 각 요소의 내용과 속성도 자식으로 나타낸다.

html에서 자식요소 찾기

• querySelector(선택자) : 한 개의 값만 반환
• querySelectorAll(선택자) : 메서드 반환 값이 다수이면 모드 []노드 리스트로 반환
• 선택자 : id(#), class(.), <tag> 등
• 예시) document.querySelector('h1');
• querySelector와 getElement와 비교
  • id값이나 class, 태그 이름을 사용하여 접근하는 방식은 비슷하다
  • querySelector는 선택자를 조합하여 접근이 가능하다.
  • querySelector와 Jquery의 유사성이 있어 크로스 플랫폼에 유용하다.
• name 속성을 사용한 요소 찾기
  • document.order.product.value처럼 찾을 수 있다.
• DOM트리를 이용한 요소 찾기
  • document.forms[0].elements[1].value

자식 요소의 내용물과 작용

• 문자에 접근하는 방법
  • innerText : 순수 텍스트를 가져오거나, 해당 요소에 텍스트를 지정
  • innerHTML : 태그와 함께 택스트를 가져오거나, 해당 요소에 태그와 함께 텍스트를 지정한다.
  • textContent : 텍스트를 가져오되, 화면에 보이는 그대로가 아니라 소스에 있는 대로 가져옴.
• 클래스 추가/제거하는 방법
  • classList.add('클래스 이름') : 클래스 요소를 추가한다.
  • classList.remove('클래스 이름') : 클래스 요소를 제거한다.
  • classList.toggle('클래스 이름') : 클래스 요소를 토글처리한다.