DOM & EVENT
👀 Node vs Elemen의 차이를 알아보자
DOM (Document Object Model)
: HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해준다.
Node vs Element
Node: HTMl 요소, 텍스트, 주석 등 모든 것을 의미
Element: HTMl 요소를 의미
예시
<div class="parent">
<!-- 주석 -->
<div class="child">child1</div>
text
<div class="child">child2</div>
</div>const parent = document.querySelector('.parent');
console.log(parent.childNodes);
console.log(parent.children);
NodeList에서 왜 저렇게 다 나올까? 모든 요소라서!
<div class="parent"> <!--text:띄어쓰기 -->
<!-- 주석 --> <!--comment:주석 , text:띄어쓰기 -->
<div class="child">child1</div> <!-- div.child:요소 -->
text <!-- text:텍스트 -->
<div class="child">child2</div> <!-- div.child:요소, text:띄어쓰기 -->
</div>DOM
properties & methods
N.parentElement
: 노드의 부모 요소 반환한다.
document.createElement()
: 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환한다.
N.perviousSibling / N.nextSibling
: 노드의 이전 형제 혹은 다음 형제 노드를 반환한다.
E.perviousElementSibling / E.nextElementSibling
: 요소의 이전 형제 혹은 다음 형제 요소 반환한다.
E.children
: 요소의 모든 자식 요소를 반환한다.
E.firstElementChild / E.lastElementChild
: 요소의 첫 번째 자식 혹은 마지막 자식 요소를 반환한다.
E.prepend(삽입할노드) / 대상요소.append(삽입할노드)
: 노드의 요소를 첫번째 / 마지막 자식으로 삽입한다.
인수를 여러개 사용할 수 있다.
E.remove()
: 요소를 제거한다.
E.insertAdjacentElement(위치,새로운요소)
: 대상요소의 지정한 위치에 새로운 요소를 삽입한다
N.insertBefore(노드,참조노드)
: 부모노드의 자식인 참조노드의 이전 형제로 노드를 삽입한다
N.contains(주어진노드)
: 주어진노드가 '노드'의 자신을 포함한 후손인지 확인.
N.textContent
: 노드의 모든 텍스트를 얻거나 변경한다.
E.innerHTML
: 요소의 모든 HTML 내용을 하나의 문자로 얻거나, 새로운 HTML을 지정한다.
E.dataset
: 요소의 각 'data-' 속성 값을 얻거나 지정한다.
E.classList
: 요소의 'class' 속성값을 제어한다.
- .add() : class 값을 추가
- .remove() : 기존 class 값을 제거
- .toggle(): 값을 토글
- .contains(): 값을 확인 - true / false 값으로 반환
E.getAttribute() / E.setAttribute()
: 요소에서 특정 속성 값을 얻거나 지정한다.
위치
window.innerWidth / window.innerHeight
: 전체화면(Viewport 브라우저)의 크기를 얻는다.
window.scrollX / window.scrollY
: 페이지의 좌상단 기준, 현재 화면(Viewport)의 수평 혹은 수직 스크롤 위치 값
window.scrollTo() / E.scrollTo(X좌표, Y좌표)
: 지정된 좌표로 대상(화면, 스크롤 요소)를 스크롤한다.
크기
E.clientWidth / E.clientHeight
: 테두리선(border)을 제외한 요소의 크기를 얻는다.
E.offsetWidth / E.offsetHeight
: 테두리선(border)을 포함한 요소의 크기를 얻는다.
E.scrollLeft / E.scrollTop
: 스크롤 요소의 좌상단 기준. 현재 스크롤 요소의 수평 혹은 수직 스크롤 위치 값
E.offsetLeft / E.offsetTop
: 페이지의 좌상단 기준, 요소의 위치를 얻는다.
E.getBoundingClientRect()
: 테두리 선(border)을 포함한 요소의 크기와 화면에서의 상대 위치 정보를 얻는다.
EVENT
.addEventListener() / .removeEventListener()
: 대상에 지정한 이벤트가 발생했을 때 지정한 함수(Handler)가 호출된다.
: 대상에 지정한 이벤트를 제거한다.
mouse Events
click
: 클릭했을 때
dblclick
: 더블클릭했을 때
mousedown
: 버튼을 누를 때
mouseup
: 버튼을 땔 때
mouseenter
: 포인터가 요소 위로 들어갈 때
mouseleave
: 포인터가 요소 밖으로 나올 때
mousemove
: 포인터가 움직일 때
contextmenu
: 우클릭했을 때
wheel
: 휠 버튼이 회전할 때
keyboard Events
keydown
: 키를 누를 때
keyup
: 키를 땔 때
keypress
: 키를 누르고 있을 때
Focus & Form Events
focus
: 요소가 포커스를 얻었을 때
blur
: 요소가 포커스를 잃었을 때
input
: 값이 변경되었을 때
change
: 상태가 변경되었을 때
submit
: 제출 버튼을 선택했을 때
reset
: 리셋 버튼을 선택했을 때
