수업 9일차
엘리스에서 온라인 강의를 듣는날이다 DOM과 이벤트를 사용하여 여러가지를 만들수 있는거지만 새로운 함수들과 새로운 지식들 그리고 처음보는 방식들도 있어서 머리에는 잘 내용이 안들어 왔지만 하다보면 들어오겠지...??
이론
- DOM과 이벤트
DOM : 문서 객체 모델, 객체 지향 모델로써 구조화된 문서를 표현하는 형식
Core DOM : 모든 문서 타입을 위한 DOM 모델
HTML DOM : HTML 문서를 위한 DOM 모델
XML DOM : 문서를 위한 DOM 모델
Document 객체 : 웹페이지를 의미함, 웹페이지에 존재하는 HTML요소에 접근하고자 할때 접근
document.getElementById() : 해당 아이디의 요소를 선택
document.getElementsByClassName() : 해달 클래스에 속한 요소를 선택
document.getElementsByName() : 해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택
document.querySelector() : 해당 선택자로 선택되는 요소를 1개 선택
document.createElement() : 지정된 HTML요소를 생성
document.write() : HTML출력 스트림을 통해 텍스트를 출력
Node : HTML DOM에서 정보를 저장하는 계층적 단위
문서노드 : HTML문서 전체를 나타내는 노드
요소노드 : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질수 있는 유일한 노드
주석노드 : HTML 문서의 모든 주석은 주석 노드
속성노드 : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다.
텍스트 노드 : HTML 문서의 모든 텍스트는 텍스트 노드
이벤트 : 웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생
이벤트 핸들러 : 이벤트가 발생했을 때 그 처리를 담당하는 함수
preventDefault() : 특정기능 정지 메서드
getAttribute() : 특정 태그가 갖고 있는 속성의 속성값을 가져온다.
window.scrollTo() : 특정 지점으로 스크롤링
setInterval() : 일정 시간마다 반복적으로 코드를 실행하고자 할때 사용
classList.remove(클래스명) : 요소에서 특정 클래스 제거
classList.add(클래스명) : 요소에 클래스명 추가
forEach(function(item){}) : 배열의 모든 요소에 코드 적용
previousElementSibling : 이전 요소 선택
nextElementSibling : 다음 요소 선택
parentElement : 부모 요소 선택
firstElementChild : 첫번째 자식 요소 선택
lastElementChild : 마지막 자식 요소 선택
실습
엘리스 플랫폼 내용(저작권)이라 오늘은 생략한다.
내일 수업은 이때까지 배운것으로 자기소개 페이지 만들기이므로 이론은 없고 실습만있다. 내일 많이 올리도록 하는걸로~!
