innn

Node에 대하여(2) 본문

FE/HTML CSS 자바 스크립트

Node에 대하여(2)

33삼 2023. 5. 1. 20:11

https://javascript.info/basic-dom-node-properties

 

Node properties: type, tag and contents

 

javascript.info

 

팀원 서머님에게 노드에 대해서 질문했음 ㅋㅅㅋ

독독한 스맛걸답게 나의 이해를 도와주었다.

 

답변 : 

createElement() 메서드는 document 객체의 메소드이기 때문에 document.createElement 

appendChild() 메서드는 Node 클래스를 상속 받는 노드들에 대해서 사용 가능 하기 때문에 Node.appendChilde라고 돼있는 것이다.

ex) elem.createElement 는 안되는데, elem.appendChild 는 됨 (elem에 child 요소를 추가하는 것)

 

이유는 노드가 도큐멘트보다 더 위 추상 클래스이기 때문인듯?

 

아래는 mdn 문서를 통한 검증 

mdn의 Node 문서를 살펴보면 메서드로 appendChild()가 속해있다. 

인스턴스 메서드 = 객체에 속한 함수

또한 Node 객체에 속한 함수를 설명할 때를 살펴보면 

Node inherits methods from its parent, EventTarget

이라고 적혀있는데, 노드의 부모인 이벤트타겟으로부터 속한 메서드를 상속받는다는 뜻이다.

여기서 이벤트 타겟 객체가 노드의 부모임을 알 수 있다.

 

suum 서머는 가명이니까 공개해도 되겟지

아래는 js.info 에서 발췌한 내용

발번역으로 노드까지 읽었는데, HTML 요소까지 읽으면 이해하기 좋을듯

 

The classes are:

  • EventTarget – is the root “abstract” class for everything. (이벤트타겟 - 가장 "추상적인" 클래스다) 자바에서 모든 클래스의 부모격이었던 오브젝트 클래스처럼.. 
  • Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later. EventTarget 클래스의 객체들은 절대로 만들어지지 않는다. 모든 DOM 노드들이 "이벤트"를 지원하도록, 그저 기반(base)의 역할을 할 뿐이다.  
  • Node – is also an “abstract” class, serving as a base for DOM nodes. 노드 역시 "추상"클래스다. DOM 노드들의 기반이다.
  • It provides the core tree functionality: parentNode, nextSibling, childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).
  • Document, for historical reasons often inherited by HTMLDocument (though the latest spec doesn’t dictate it) – is a document as a whole.
  • The document global object belongs exactly to this class. It serves as an entry point to the DOM.
  • CharacterData – an “abstract” class, inherited by:
    • Text – the class corresponding to a text inside elements, e.g. Hello in <p>Hello</p>.
    • Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.
  • Element – is the base class for DOM elements.A browser supports not only HTML, but also XML and SVG. So the Element class serves as a base for more specific classes: SVGElement, XMLElement (we don’t need them here) and HTMLElement.
  • It provides element-level navigation like nextElementSibling, children and searching methods like getElementsByTagName, querySelector.
  • Finally, HTMLElement is the basic class for all HTML elements. We’ll work with it most of the time.
  • It is inherited by concrete HTML elements:

 

읽어보면 input 태그 조차 HTMLInputElement 클래스를 상속받은 엘리먼트임. 

html까지 객체지향적으로 만들어졌구나. 근데 왜 자스는 그렇게 안만들었을까. 의문

'FE > HTML CSS 자바 스크립트' 카테고리의 다른 글

[ts] uuid와 함께 아이템 추가하기 (@types/uuid도 추가해준다)  (0) 2023.11.15
JSON.parse()와 JSON.stringify()인데... todo list 예시를 곁들인  (0) 2023.06.26
Node.appendChild() 메서드와 Node에 대하여  (0) 2023.05.01
Tailwind 사용기 (1)  (0) 2023.04.15
box와 inline 차이는?  (0) 2022.09.16
'FE/HTML CSS 자바 스크립트' Related Articles more