노드 객체와 요소 객체의 차이점
Node 객체와 Element 객체가 완전히 혼동됩니다. document.getElementById()Element를 제기하다document.getElementsByClassName()NodeList 오브젝트(요소 또는 노드 컬렉션)를 반환합니다.
div가 Element Object인 경우 div Node Object는 어떻게 됩니까?
노드 오브젝트란?
문서 객체, 요소 객체 및 텍스트 객체도 노드 객체입니까?
David Flanagan의 저서 'Document 객체, 그 요소 객체 및 텍스트 객체는 모두 노드 객체'에 따르면.
그렇다면 오브젝트는 노드 오브젝트뿐만 아니라 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는, 입니다. a.node에는, 「DOM」.document ★★★★★★★★★★★★★★★★★」document.body 、 specified 、 specified 、 specified 、 HTML , 、 as as as as as as as as as 등 일 수 <input> ★★★★★★★★★★★★★★★★★」<p>또는 다른 요소 안에 텍스트 블록을 보관하기 위해 시스템에 의해 생성된 텍스트 노드일 수도 있습니다.한마디로 말해서node는브 DOM dom브브브다 다브다 。
안element는 특정 중 입니다.node다른 노드 유형(텍스트 노드, 주석 노드, 문서 노드 등)이 많기 때문입니다.
DOM, nextSibling, previousSibling, nextSibling, previousSibling.그 구조는 나무와 같은 계층을 형성합니다.document에는 ""가 .htmlnode로 지정합니다.html(자노드 리스트).head 및 " " " 입니다.bodynode합니다.body노드에는 하위 노드 목록(HTML 페이지의 최상위 요소) 등이 있습니다.
상비 so so so sonodeList입니다.nodes.
할 수 특정 이며, 태그와 수 .id ★★★class「 」 「 」 、 「 」.하다 각드 a a a a a a each each a a a a a가 있습니다..nodeType노드 타입을 보고합니다.여기에서는 다양한 유형의 노드를 확인할 수 있습니다(MDN의 그림).
보면 '아까보다'가 요.ELEMENT_NODE는 노드 중이며, 이 에서는 이 노드들이 사용되고 있습니다.nodeType은 「」입니다.1.
★★★★★★★★★★★★★★★★★.document.getElementById("test")는 1개의 노드만 반환할 수 있으며, 그 노드가 요소(특정 노드 유형)임을 보증합니다.그 때문에, 리스트가 아니고 요소만을 반환합니다.
★★document.getElementsByClassName("para")할 수 을 선택했습니다.디자이너는 를 반환하도록 선택했습니다.nodeList여러 노드 목록에 대해 만든 데이터 유형이기 때문입니다. 이름을 있기 라고 하는 말하면 「클래스 이름」이라고 하는 것입니다.nodeList는 다른 수 이 컬렉션은 '유형 요소'입니다.elementList그러나 그들은 요소만 포함하든 안 하든 한 가지 유형의 컬렉션만 사용하기로 선택했습니다.
편집: HTML5는HTMLCollectionHTML 요소 목록입니다(노드 없음, 요소만).를 반환하고 있습니다.HTMLCollection의 nodeList현재 구분은 노드 유형이 아닌 요소만 포함된다는 점에서 이루어집니다.
「 」의 nodeList ★★★HTMLCollection(제가 알기론) 사용방법에는 거의 영향을 주지 않지만, HTML5의 디자이너가 그 차이를 만들어 냈습니다.
를 들면, 「」는,element.childrenHTML 콜렉션
Element 계승하다Node 같은 「」를 참조해 주세요.Dog 계승하다Animal.
안ElementNode '''와 같은 DogAnimal★★★★★★ 。
Node는 트리 를 실장하기 위한 이므로, 그 는 「트리 구조」, 「트리 구조」를 위한 것입니다.firstChild,lastChild,childNodes이치노
다음에 몇 가지.Node도 '''입니다.Element★★★★★★★★★★★★★★★★★★.Element 계승하다NodeElement는 실제로 되어 있는 .HTML 파일에는 .<div id="content"></div> . 。Element합니다.attributes,id,innerHTML,clientWidth,blur() , , , , 입니다.focus().
★★★Node로, 텍스트노드가 .Element★★★★★★★★★★★★★★★★★★★ 각각Node에 브브 a a a a a a a a가 있다.nodeTypeHTML の html html 、 [ HTHTML html html 。
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__ Safari를 Chrome, Firefox "Safari" "Safari" (크롬, 파이어폭스)
그...document트리의 맨 이며 object는 트리의 맨 위입니다.document는 입니다.Document 및 " " " "Document 계승하다Node아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.
> Document.prototype.__proto__ === Node.prototype
true
다음은 노드 클래스와 요소 클래스에 대한 몇 가지 문서입니다.
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element
모든 DOM 문제를 해결하는 최적의 정보원
https://www.w3.org/TR/dom/ #syslog
Document, Document Fragment, Document를 구현하는 객체Type, Element, Text, ProcessingInstruction 또는 Comment 인터페이스(단순히 노드라고 불립니다)가 트리에 참여합니다.
https://www.w3.org/TR/dom/ #syslog
요소 노드는 단순히 요소로 알려져 있습니다.
노드 : http://www.w3schools.com/js/js_htmldom_nodes.asp
노드 개체는 문서 트리의 단일 노드를 나타냅니다.노드에는 요소 노드, 속성 노드, 텍스트노드 또는 "노드 유형" 장에서 설명하는 기타 노드 유형을 지정할 수 있습니다.
요소 : http://www.w3schools.com/js/js_htmldom_elements.asp
Element 객체는 XML 문서의 요소를 나타냅니다.요소에는 속성, 다른 요소 또는 텍스트가 포함될 수 있습니다.요소에 텍스트가 포함되어 있는 경우 텍스트는 텍스트노드로 표시됩니다.
중복:
노드는 일반적으로 태그를 나타내기 위해 사용됩니다.3가지 타입으로 나누어져 있습니다.
Attribute Note:는 그 내부에 Atribute가 있는 노드입니다.유효기간:<p id=”123”></p>
텍스트 노드: 시작과 종료 사이에 콘티언 텍스트 내용이 있는 노드입니다.유효기간:<p>Hello</p>
요소 노드 : 내부에 다른 태그가 있는 노드입니다.유효기간:<p><b></b></p>
각 노드는 단일 유형일 뿐만 아니라 동시에 유형일 수도 있습니다.
요소는 단순히 요소 노드입니다.
언급URL : https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object
'source' 카테고리의 다른 글
| Larabel에서 외부 API로 HTTP 요청 수행 (0) | 2022.09.16 |
|---|---|
| jQuery를 사용하여 URL에서 쿼리 문자열 가져오기 (0) | 2022.09.16 |
| Kotlin에 동시성 키워드가 없는 이유는 무엇입니까? (0) | 2022.09.16 |
| 명령줄에서 Eclipse Java 프로젝트 빌드 (0) | 2022.09.16 |
| 구분 기호로 점이 있는 문자열 분할 (0) | 2022.09.16 |