EventTarget_Node
MDN Node 웹페이지에 오면 DOM Node가 무엇인지에 대해서 나와있다.
참고: https://developer.mozilla.org/en-US/docs/Web/API/Node
Node - Web APIs | MDN
The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objec
developer.mozilla.org
DOM Node라는 인터페이스는 사용자가 DOM API를 쓰는데 매우 필수적인 인터페이스다라고 설명이 되어있다.
Node 안에는 document나 Element 이런 아이들이 들어있다.
Node는 다이어그램에서 화살표를 가리키고 있는데 이것은 Node라는 것이 EventTarget을 상속한다라는 말이다.
그래서 즉 모든 Node는 EventTarget이라고도 말할 수가 있다.
EventTarget에는 총 세 가지의 Methods가 있는 것을 확인할 수 있다.
addEventListener는 결국 EventTarget에서 지원해 주는 API였다. 이때까지 window나 document나 아니면 버튼 같은 애들을 querySelector를 이용해서 변수에 할당했다. 이때 할당한 변수가 htmlelement일 수도 있고 document일 수도 있지만 결국 이런 모든 애들은 node이고 또 node는 eventtarget이기 때문에 eventtarget에서 지원해주는 이런 API를 쓸 수 있었던 거다. EventTarget에는 총 세 가지가 있다.
이벤트 리스너를 등록할 수도 있지만, 사용자가 원하는 특정한 이벤트 리스너를 뺄 수도 있다. 특별한 이벤트를 발행할 수도 있다. 그래서 모든 노드는 이벤트가 발생할 수도 있고 이벤트를 들을 수도 있다. 이것이 가능한 것은 모든 노드가 이벤트타겟이기 때문이다. 다시 노드로 가서 형제요소도 받아올 수 있고 노드의 이름뿐만 아니라 노드 타입들도 받아올 수 있고, 타입에는 elenemt인지 attribute인지 text인지 이런 다양한 것들 을 알 수 있는 방법이 있다라는 것을 확인이 가능하다.
참고: https://developer.mozilla.org/en-US/docs/Web/API/Node
Node - Web APIs | MDN
The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably. As an abstract class, there is no such thing as a plain Node object. All objec
developer.mozilla.org
그리고 노드의 부모 요소는 무엇인지 이런 것들을 확인할 수가 있다. 노드에도 appendchild, child 요소들을 추가할 수 있고 노드를 복사 할 수도 있고, 노드에서 공통적으로 쓸 수 있는 이런 properties들은 무엇이 있는지 이런 값들을 이용해서 아하 Node에는 이렇게 childNodes 노드 안에 들어 있는 모든 자식 노드들을 받아올 수 있고,
첫 번째 들어 있는 요소와 그리고 노드가 연결되어 있는지 노드의 마지막 자식 요소 그리고 노드의 옆에 있는 그리고 document의 position을 비교할 수도 있고 노드 안에 어떤 특정한 요소가 들어 있는지 없는지 확인하는 것들 이런 것 RootNode, Root는 항상 html일것이다. 대부분의 케이스는 Child Node가 있는지 없는지, 추가하는 거 이런 것들도 다양한 API를 통해서 해 볼 수가 있다.