DOM

Document Object Model
문서 객체 모델
객체 지향 모델로써 구조화된 문서를 표현하는 형식

• HTML 문서에 대한 인터페이스
  DOM은 문서의 구조화된 표현을 제공하여 프로그래밍 언어가 구조, 스타일, 내용 등을 변경할 수 있다.

종류

• Core DOM : 모든 문서 타입을 위한 DOM 모델
• HTML DOM : HTML 문서를 위한 DOM 모델
• XML DOM : 문서를 위한 DOM 모델

HTML DOM

HTML 문서를 조작하고 접근하는 표준화된 방법
모든 요소를 이를 통해 접근 가능함. 이걸로 모든 조작이 가능하다.

Document 객체

웹 페이지를 의미
웹 페이지에 있는 HTML 요소에 접근하고자 할 때는 Document 객체부터 시작해야한다.

메소드

선택

• getElementById() : 아이디 요소 선택
• getElementByClassName(): 클래스에 속한 요소를 모두 선택
• getElementsByName(): 해당 name 속성값을 가지는 요소를 모두 선택
• querySelectorAll(): 해당 선택자로 선택되는 요소를 모두 선택
• querySelector(): 해당 선택자로 선택되는 요소를 1개 선택

생성

• createElement() : HTML 요소를 생성. object를 넘김
• write(): HTML 출력 스트림을 통해 텍스트 출력. 단순히 text 출력

이벤트 핸들러 추가

요소.onclick = function(){}

속성

• textContent
  • 텍스트만 가져온다
  • 스타일은 무시한다
• innerText
  • 마크업 언어가 적용된 상태로 읽어온다.
  • 스타일 또한 적용된 상태로 읽어온다. 그래서 display:none;은 가져오지 못한다.

DOM 트리 구조

DOM은 트리 구조이다.
tag의 열고 닫힘으로 부모 자식을 구분해 트리를 만든다.

DOM 요소 선택

document 선택 메소드를 이용해 element를 가져온다.

DOM 요소의 스타일 변경

document.querySelector('div').style.color='red'

DOM 요소의 내용 변경

.innerHTML=' ~ '

DOM 제어

메서드/속성	설명
appendChild(append할 Element)	선택한 Element의 자식 Element 마지막에 추가
remove()	선택된 Element 삭제
removeChild(삭제할 Element)	선택된 Element의 자식 Element 삭제
createElement(만들 Element)	Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild	first면 첫번째, last면 마지막 자식 Element 반환

Node 객체

Node & Node Tree

Node

HTML DOM에서 정보를 저장하는 계층적 단위

Node Tree

노드들의 집합으로 노드 간의 관계를 나타낸다.
HTML DOM을 이용해 노드 트리에 포함된 모든 노드에 접근할 수 있다.

노드 간의 관계

노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있음

• 부모-자식 관계 : 부모 노드, 자식 노드
• 형제 관계 : 형제 노드 (같은 계층)

종류

• 문서 노드 Document Node
  HTML 문서 전체
• 요소 노드 Element Node
  모든 HTML요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
• 주석 노드 Comment Node
  HTML 문서의 모든 주석은 주석 노드 > 잘 사용하지 않음
• 속성 노드 Attribute Node
  모든 HTML 요소의 속성은 속성 노드, 요소 노드에 대한 정보를 갖음. 하지만 자식 노드는 아님
• Text Node
  모든 텍스트

값

프로퍼티로 접근할 수 있음

• nodeName 이름
• nodeValue 값
• nodeType 타입

Event

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
JS는 발생한 이벤트에 반응하여 동작 수행

이벤트 타입

발생한 이벤트 종류

• mouseenter vs mouseover
  enter은 적용된 영역만, over은 자식에게도 적용이 된다.

이벤트 헨들러

이벤트 발생시 그 처리를 담당하는 함수
웹 브라우저가 요소에 등록된 이벤트 핸들러를 실해잇킨다.

작성된 이벤트 핸들러는 먼저 해당 객체나 요소에 등록해야만 호출될 수 있다.
1. JS에서 프로퍼티로 등록
window.onload=function(){}
2. HTML 태그에 속성으로 등록하는 방법
<p onclick='this.innerText='클릭!'>클릭해보세요</p>

⚡️event.preventDefault()

눌렀을 때 고유의 동작을 중지시키는 역할
개발자가 원하는대로 작동시키기 위해 작성돼야 함

window 객체

웹 브라우저 창. 객체를 이용하여 브라우저를 조작할 수 있음. 생략 가능하다.

메서드	설명
close()	현재 창을 닫습니다
open(링크, 새 탭 or 현재 탭 (optional), 설정 (optional))	새 창을 엽니다
setTimeout(함수, 밀리초)	지정한 초 뒤에 함수 실행
alert(메시지)	팝업 창 생성
scrollTo(옵션)	옵션에 있는 좌표 값으로 스크롤