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

JAVASCRIPT / 글쓴이

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]

답변

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을 반환합니다.

답변

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

답변

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

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

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

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

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

답변

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

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

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

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

복제 :

답변

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

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

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

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

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

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

답변