Node 객체와 Element 객체의 차이점은 무엇입니까?

301

Node 객체와 Element 객체가 완전히 혼동됩니다. NodeList document.getElementById()객체를 document.getElementsByClassName()반환 하는 동안 Element 객체를 반환합니다 (Element 또는 Nodes의 컬렉션?)

div가 요소 객체라면 div 노드 객체는 어떻습니까?

노드 객체 란 무엇입니까?

문서 객체, 요소 객체 및 텍스트 객체도 노드 객체입니까?

David Flanagan의 책 '문서 객체, 요소 객체 및 텍스트 객체는 모두 노드 객체'입니다.

그렇다면 어떻게 객체가 Node 객체뿐만 아니라 Element 객체의 속성 / 메소드를 상속받을 수 있습니까?

그렇다면 노드 클래스와 요소 클래스가 프로토 타입 상속 트리와 관련이 있다고 생각합니다.

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

javascript html dom

— PK
소스

13

12 가지 유형의 노드가 있으며 그 중 하나 인 요소

— Esailija

이 12 가지 유형 모두가 Element Object도 아닌가? 1 = ELEMENT_NODE, 3 = TEXT_NODE와 같이 둘 다 Element 객체라고 생각합니다.

— PK

5

아닙니다. 요소는 단일 유형의 노드입니다.

— Esailija

480

A node는 DOM 계층에서 모든 유형의 객체에 대한 일반 이름입니다. A node는 documentor 와 같은 내장 DOM 요소 중 하나 일 document.body수 있으며, HTML과 같은 HTML에 지정된 HTML 태그 <input>이거나 <p>다른 요소 내에 텍스트 블록을 보유하기 위해 시스템에 의해 작성된 텍스트 노드 일 수 있습니다. . 간단히 말해 a node는 모든 DOM 객체입니다.

A element는 node다른 많은 유형의 노드 (텍스트 노드, 주석 노드, 문서 노드 등) 가 있기 때문에 하나의 특정 유형입니다 .

DOM은 각 노드가 부모, 자식 노드 목록 및 nextSibling 및 previousSibling을 가질 수있는 노드 계층으로 구성됩니다. 이 구조는 나무와 같은 계층 구조를 형성합니다. document노드는 자식 노드 (의 명단 것이다 head노드와 body노드). body노드는 등등 자식 노드 (HTML 페이지에서 최상위 레벨 요소)과의 목록을 가질 것이다.

따라서 a nodeList는 단순히 배열과 같은 목록입니다 nodes.

요소는 특정 유형의 노드로, HTML 태그를 사용하여 HTML에 직접 지정할 수 있으며 an id또는 a 와 같은 속성을 가질 수 있습니다 class. 자식 등을 가질 수 있습니다 ... 다른 특성을 가진 주석 노드, 텍스트 노드 등과 같은 다른 유형의 노드가 있습니다. 각 노드에는 노드 .nodeType유형을보고 하는 속성 이 있습니다. 여기에서 다양한 유형의 노드를 볼 수 있습니다 ( MDN의 다이어그램 ).

여기에 이미지 설명을 입력하십시오

특성 값이 인 ELEMENT_NODE특정 노드 유형 중 하나를 볼 수 있습니다 .nodeType1

따라서 document.getElementById("test")하나의 노드 만 반환 할 수 있으며 요소 (특정 유형의 노드)가 보장됩니다. 이 때문에 목록이 아닌 요소 만 반환합니다.

이후 document.getElementsByClassName("para")하나 개 이상의 객체를 반환 할 수 있습니다, 디자이너가를 반환하기로 결정했습니다 nodeList즉 그들은 더 이상의 노드의 목록을 만든 데이터 타입이기 때문에. 이것들은 요소 일 수 있기 때문에 (요소 만 일반적으로 클래스 이름을 가짐) 기술적으로는 nodeList요소 유형의 노드 만 가지고 있으며 디자이너는 다른 이름의 컬렉션을 만들 수 elementList있지만 유형은 하나만 사용하도록 선택했습니다 컬렉션에 요소 만 포함되어 있는지 여부

편집 : HTML5는 HTMLCollectionHTML 요소 (노드가 아닌 요소 만)의 목록을 정의합니다 . HTML5의 여러 속성 또는 메서드는 이제을 반환합니다 HTMLCollection. 인터페이스는 인터페이스와 매우 유사하지만 nodeList노드 유형이 아닌 요소 만 포함한다는 점이 구별됩니다.

a nodeList와 a의 구별은 HTMLCollection(내가 말할 수있는 한) 사용 방법에 거의 영향을 미치지 않지만 HTML5의 디자이너는 이제 그 구별을했습니다.

예를 element.children들어이 속성은 라이브 HTMLCollection을 반환합니다.

— jfriend00
소스

2

모든 요소가 노드이지만 모든 노드가 요소는 아닙니다 ... 맞습니까? 특정 것들을 반복 할 때 JavaScript 함수에서 노드 또는 요소로 물건을 설명할지 여부를 생각하고있었습니다.

— Ryan Williams

6

나는 7 살짜리 포스트를 부활시키고 있다는 것을 알고 있지만,이 훌륭하고 철저한 설명에 감사의 말을 전하고 싶습니다! 완벽하게 이해되었습니다.

— AleksandrH

@AleksandrH-여전히 유용합니다.

— jfriend00

59

Node트리 구조를 구현하기위한, 그래서 그 방법을위한 firstChild, lastChild, childNodes, 등 그것은 일반적인 트리 구조에 대한 더 많은 클래스입니다.

그런 다음 일부 Node객체도 Element객체입니다. Element에서 상속 Node합니다. Elementobjects는 실제로 HTML 파일에 지정된 것과 같은 태그를 사용하여 객체를 나타냅니다 <div id="content"></div>. Element클래스는 속성과 같은 방법을 정의 attributes, id, innerHTML, clientWidth, blur(),와 focus().

일부 Node객체는 텍스트 노드이며 Element객체 가 아닙니다 . 각 Node객체에는 nodeTypeHTML 문서의 노드 유형을 나타내는 속성이 있습니다.

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

콘솔에서 몇 가지 예를 볼 수 있습니다.

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

위의 마지막 줄은에서 Element상속받은 것을 보여줍니다 Node. (이 줄은로 인해 IE에서 작동하지 않습니다 __proto__. Chrome, Firefox 또는 Safari를 사용해야합니다.)

그런데, document객체는 노드 트리의 상단이며, documentA는 Document객체와 Document의 상속 Node뿐만 아니라 :

> Document.prototype.__proto__ === Node.prototype
  true

다음은 Node 및 Element 클래스에 대한 몇 가지 문서입니다.
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

— 비극성
소스

무엇에 대해 <span data-a="1" >123</span>? 이 범위는 자체 노드가있는 요소입니다. 그러나 속성에도 자체 노드가 있습니까?

— Royi Namir

내가 명확히하고 싶은 유일한 요점은 Node가 클래스가 아닌 인터페이스라는 것입니다. 많은 DOM API 객체 유형이 상속됩니다. 이러한 유형을 유사하게 취급 할 수 있습니다. 예를 들어, 동일한 메소드 세트를 상속하거나 동일한 방식으로 테스트합니다. 나는 당신이 참조하는 mozilla 링크에서 이것을 발견했습니다. 소중한 답변 주셔서 감사합니다

— Ahmed KhaShaba

8

모든 DOM 문제에 대한 최상의 정보 소스

http://www.w3.org/TR/dom/#nodes

"Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction 또는 Comment 인터페이스 (단순 노드라고도 함)를 구현하는 객체가 트리에 참여합니다."

http://www.w3.org/TR/dom/#element

"요소 노드는 단순히 요소로 알려져 있습니다."

— 맷 에쉬
소스

7

노드 : http://www.w3schools.com/js/js_htmldom_nodes.asp

Node 객체는 문서 트리에서 단일 노드를 나타냅니다. 노드는 요소 노드, 속성 노드, 텍스트 노드 또는 노드 유형 장에 설명 된 다른 노드 유형일 수 있습니다.

요소 : http://www.w3schools.com/js/js_htmldom_elements.asp

Element 객체는 XML 문서의 요소를 나타냅니다. 요소에는 특성, 다른 요소 또는 텍스트가 포함될 수 있습니다. 요소에 텍스트가 포함 된 경우 텍스트는 텍스트 노드로 표시됩니다.

복제 :

— 제롬 캔스
소스

4

노드는 일반적으로 태그를 나타내는 데 사용됩니다. 3 가지 유형으로 구분 :

속성 참고 : 내부에 속성이있는 노드입니다. 특급 :<p id=”123”></p>

텍스트 노드 : 시작과 끝 사이에 contian 텍스트 내용이있는 노드입니다. 특급 :<p>Hello</p>

Element Node : 내부에 다른 태그가있는 노드입니다. 특급 :<p><b></b></p>

각 노드는 단일 유형일 필요는 없으며 동시에 유형일 수도 있습니다.

요소는 단순히 요소 노드입니다.

— 헤 카림
소스