🍾 Javascript DOM, Event 학습 기록
서론
대망의 4주 차(1) 과제!
이번주에는 DOM, EVENT에 대해 강의로 학습하고 오 이런 것도 있었구나 / 있었지 싶은 것들을 기록했다.
역시 자바스크립트는 알면 알수록 재미있다 🤓
* DOM
Document Object Model (문서 객체 모델)
html 문서의 각 요소들을 트리로 표현해 준다.
자바스크립트를 이용해 생성, 수정, 삭제 등이 가능하다.
트리에서 하나의 개체를 Node라고 부른다.
모든 html 태그는 객체이고, 자바스크립트를 이용하여 객체에 접근할 수 있다!
* .querySelectorAll() / getElementsByTagName()
not Array! node list!
이터러블 객체이기 때문에 for of를 사용할 수 있지만, array가 아니기 때문에 array 메서드는 사용할 수 없다.
* parentNode vs parentElement
parentNode : 부모노드
parentElement : 부모노드 중 요소 노드만
? 요소노드란, HTML태그로 이루어진 요소를 말한다.
* childNodes vs children
childNodes : 자식노드 모두
children : 자식노드들 중 요소노드만
* preveiousSibling / nextSibling vs previousElementSibling / nextElementSibling
preveiousSibling / nextSibling : 형제노드. 앞 / 뒤
previousElementSibling / nextElementSibling : 형제 노드의 요소노드. 앞 / 뒤
* nodeType / nodeName / nodeValue
nodeType : 노드타입은 여러 가지가 있다. 🔗MDN
그중 자주 사용되는 타입은 요소(1), 속성(2), 텍스트(3), 주석(8) 이 있다.
nodeName : 현재 노드의 이름.
nodeValue : 현재 노드의 값. 텍스트타입이 아닐 경우 null을 반환한다.
* cloneNode()
괄호 안의 값이 없거나 false 일 경우 해당 노드만 복제한다.
괄호 안의 값이 true 일 경우 자식노드까지 모두 복제한다.
* addEventListner("DOMContentLoaded", 함수/함수명)
HTML페이지 초기 로딩이 완료되었을 때 이벤트가 발생한다.
* focus / blur
focus : input 포커스
blur : input 포커스 해제
* window.innerWidth / innerHeight
현재 창 너비와 높이
* 이벤트버블링
자식노드에서 일어난 이벤트가 상위노드까지 올라가는 현상.
버블링을 막기 위해 event.stopPropagation()을 사용할 수는 있지만, 추후에 문제가 생길 수 있으므로 잘 사용하지 않는다.
자세한 내용은 🔗링크
* event.target
실제로 이벤트가 발생한 요소
* event.currentTarget
이벤트 핸들러가 등록된 요소