01 DOM이란?
Document Object Model(문서 객체 모델).
줄글로 나와 있는 코드를 트리구조로 바꿔주는 모델
객체 지향 모델. 구조화된 문서를 표현하는 형식을 제공해서 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 한다.
💬 DOM은 프로그래밍 언어와 독립적이다. -주로JS를 사용하지만, DOM의 구현은 다른 언어에서도 가능하다.
DOM의 종류
- HTML DOM
- core DOM
- XML DOM
document 객체
웹 페이지를 의미한다.
웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 document객체부터 시작해야 한다.
document 메소드가 제공하는 것
-
HTML 요소의 선택
document.getElementById()
document.getElementsByClssName()
document.getElementsByTagName()
document.getElementsByName(): 해당 name속성값을 가지는 요소 선택
document.querySelectorAll()
document.querySelector(): 해당 선택자로 선택되는 첫번째 요소 선택. 아이디는 #, 클래스는 . 을 먼저 써줘야한다. -
HTML 요소의 생성
document.createElement(): 지정된 html요소를 생성 ->object
document.write(): html 출력 스트림을 통해 텍스트 출력 -
HTML 이벤트핸들러 추가
요소.onclick = function() {}: 해당 요소 클릭시 해당 함수 실행 -
HTML 객체의 선택
02 자바스크립트와 DOM
document.querySelector('.category.tMargin > .ribbon > a').href : category tMargin클래스 아래의 ribbon클래스 아래의 a태그 의 href속성 을 선택
- getElements~ 에서 s가 붙어있으면 반환되는 값이 배열로! (복수)
03 Node 객체
Node
HTML DOM에서 정보를 저장하는 계층적 단위
- 루트노드(html) ➡ 첫번째 자식노드= head, 두번째 자식노드 = body
- 형제노드 = head 와 body
- 부모노드 = head, body의 부모노드는 html
노드의 종류
- 문서 노드 : html문서 전체를 나타내는 노드
- 요소 노드 : 모든 html요소는 요소노드로, 속성 노드를 가질 수 있는 유일한 노드
- 주석 노드 : html문서의 모든 주석
- 속성 노드 : 모든 html요소의 속성. 요소 노드에 관한 정보를 가진다. 해다 요소 노드의 자식 노드에는 포함되지 않음
- 텍스트 노드 : html문서의 모든 텍스트
노드의 값
- nodeName(이름)
- nodeValue(값)
- nodeType(타입)
노드타입의 property값은 텍스트가 아닌 숫자로 표현된다.
요소 노드 : 1
속성 노드 : 2
텍스트 노드 : 3
주석 노드 : 8
문서 노드 : 9
04 이벤트(event)
웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생
이벤트 타입
- form, 키보드, 마우스, HTML DOM, Window객체 등
이벤트 핸들러
이벤트가 발생했을 때 그 처리는 담당하는 함수
지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.
(개발자가 등록만 해주면 웹 브라우저가 알아서 실행시켜준다)
- 작성된 이벤트 핸들러는 먼저 해당 객체나 요소에 등록되어야만 호출될 수 있다.
객체나 요소에 이벤트 핸들러를 등록하는 방법
- js코드에서 property로 등록
- HTML태그에 속성으로 등록
