노드와 엘리먼트 비교

노드(Node)는 DOM(Document Object Model)에서 문서 내 모든 개체를 나타내는 일반적인 용어입니다. DOM은 웹 페이지 내의 모든 HTML, XML 및 XHTML 요소를 객체 모델로 나타냅니다. 노드는 문서 내 모든 항목을 나타내며, 이들은 다음과 같이 분류됩니다.

  1. 문서 노드(Document Node) - 문서 전체를 나타냅니다.

  2. 요소 노드(Element Node) - HTML 요소를 나타냅니다. 예를 들어, <div>, <p>, <span> 등의 요소가 있습니다.

  3. 속성 노드(Attribute Node) - HTML 요소의 속성을 나타냅니다. 예를 들어, class, id, src, href 등의 속성이 있습니다.

  4. 텍스트 노드(Text Node) - HTML 요소 내의 텍스트를 나타냅니다.

엘리먼트(Element)는 요소 노드(Element Node)를 나타내는 특정 유형의 노드입니다. HTML 문서의 각 요소(element)는 노드(node)입니다. 엘리먼트는 요소 노드에 대한 참조입니다.

요소(Element)와 엘리먼트 노드(Element Node)는 자주 혼용해서 사용되는 용어이며, 일반적으로 동일한 의미로 사용됩니다

한줄로 정의하면 아래같이 노드안에 속해진 하나가 엘리먼트라는 html의 태그정보인가..

노드 > 요소

더 짧게 정리하면.. (중요)

  1. html의 모든 내용을 자바스크립트가 사용할수있는 객체로 변환한다 (DOM객체)

  2. 변환할 내용은 <div>나 class나 주석등 모든 정보가 DOM으로 변환된다

  3. 모든 변환된 내용은 Node 라는 인터페이스를 구현한다

  4. HTML의 모든 정보 -> 객체화(DOM) -> 전부 NODE를 구현 -> 노드를 구현한 각 객체(DOM) 안에는 텍스트,속성(tml태그),요소(class)등이 있다


참고

https://velog.io/@ehrud1031/node와-element-차이비교

Apr 16, 2023 Views 111