🍾 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

이벤트 핸들러가 등록된 요소