[JQUERY] 객체의 HTMLCollection, NodeLists 및 배열의 ​​차이

객체의 HTMLCollection, NodeLists 및 배열의 ​​차이

해결법

1. ---

   1.우선은 NodeList를하고 HTMLCollection의 차이를 설명 할 것이다.

   우선은 NodeList를하고 HTMLCollection의 차이를 설명 할 것이다.

   두 인터페이스는 DOM 노드의 모음입니다. 그들은 그들이 제공하는 방법과 여기에 포함 할 수있는 노드의 종류에 차이가 있습니다. NodeList를이 노드 유형을 포함 할 수 있지만, HTMLCollection은 포함 요소 노드 예정이다. HTMLCollection 동일한 NodeList를 같은 방법과 별도로 namedItem 호출하는 방법을 제공한다.

   액세스가 여러 노드, 예를 들어, 제공 할 때 컬렉션은 항상 사용 (예 : getElementsByTagName 등) 대부분의 선택 방법은 여러 노드 또는 모든 자녀 (element.childNodes)에 대한 참조를 얻기를 반환합니다.

   모음 - 자세한 내용은 DOM4 사양을 살펴 있습니다.

   getElementsByTagName는 DOM 인터페이스 방법이다. 그것은 입력으로 태그 이름을 받아 들여 HTMLCollection을 (DOM4 사양을 참조)을 반환합니다.

   $ ( "TD")는 아마도 jQuery를합니다. 그것은 유효한 CSS / jQuery를 선택을 허용하고있는 jQuery 객체를 리턴한다.

   표준 DOM 컬렉션 및 jQuery를 선택의 가장 큰 차이는, 그들이 영향을받는 경우, 즉 DOM에 대한 변경은 컬렉션에 반영됩니다 (모든 방법은 라이브 모음 생각을 반환)가 DOM 컬렉션은 일반적으로 게재되고있다. jQuery를 선택 함수가 호출 된 순간에 DOM 트리의 스냅 샷 반면 그들은, DOM 트리에보기 같다.

   jQuery를 객체는 배열과 같은 객체, 즉 그들이 (배열은 단지 자신을 객체 있음을 알아 두셔야합니다) 숫자 속성과 길이 속성이 있습니다. 브라우저는 어레이와 특별한 방법으로 객체 어레이 형상을 표시하는 경향 등 ..., ..., ...].

   내 대답의 첫 번째 부분을 참조하십시오. 당신은 NodeLists을 선택할 수 없습니다, 그들은 선택의 결과이다.

   내가 아는 한, 그들은 일부 DOM 메소드 / 속성에 의해 반환됩니다 (i.n. 빈을 생성하고 이후에 노드를 추가) 프로그래밍 NodeLists을 만들 수도 방법이 없습니다.

2. ---

   2.여기에 대한 몇 가지 정의가 있습니다.

   여기에 대한 몇 가지 정의가 있습니다.

   DOM 레벨 1 사양 - 기타 객체 정의 :

   DOM 레벨 3 사양 - NodeList를

   그들은 모두 그 값이 할 때 DOM 업데이트된다는 것을 의미합니다 라이브 데이터를 포함 할 수 있습니다. 또한 기능의 다른 세트가 포함되어 있습니다.

   당신이 테이블 DOM 요소가 모두 childNodes에 NodeList를 [2] 어린이 HTMLCollection [1]을 포함하여 스크립트를 실행하는 경우 콘솔을 검사 할 경우주의 할 것이다. 그들은 왜 다른가요? HTMLCollection 요소 노드 만 포함 할 수 있기 때문에, NodeList를 또한 텍스트 노드가 포함되어 있습니다.

   document.getElementsByTagName는 ( "TD")는 DOM 요소 (NodeList를)의 배열을 반환 $ ( "TD") 속성 0, 1 document.getElementsByTagName ( "TD")의 요소를 가지고의 jQuery 객체라고 2 등의 주요 차이점은 jQuery 오브젝트가 조금 느린 검색 할 수 있지만 편리한 jQuery를 기능 모두에 액세스 할 수 있다는 것입니다.

   이들은 DOM 요소 설정 등 그 특성은 0, 1, 2와 개체. 다음은 간단한 예제이다 : 그것은 작동하는 방법 :

   jsFiddle

       var a = {
           1: "first",
           2: "second"
       }
       alert(a[1]);
   

   당신은 당신의 코드, getElementsByClassName 및 getElementsByTagName 모두 반환 NodeLists에서 그들을 검색 한

3. ---

   3.HTMLCollection는 요소 노드 (태그)를 포함하고 NodeList를 모든 노드가 포함되어 있습니다.

   HTMLCollection는 요소 노드 (태그)를 포함하고 NodeList를 모든 노드가 포함되어 있습니다.

   네 개의 노드 유형이 있습니다 :

   nodeTypes

   공백 내부 요소 것은 텍스트로 간주되며, 텍스트 노드로 간주됩니다.

   다음을 고려하세요:

   <ul id="myList">
     <!-- List items -->
     <li>List item 1</li> 
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
     <li>List item 5</li>
   </ul>
   

   공백 :

   • 목록 항목보기

     어떤 공백 없습니다 :

     • 목록 항목보기

     • ---

       4.이는 HTML 객체들의 배열을 포함 JQuery와 객체를 반환 $ ( "TD")는의 jQuery 오브젝트를 확장하고 JQuery와 방법이있다. document.getElementsByTagName ( "TD")는 원시 JS의 방법이며 NodeList를 반환합니다. 이 문서를 참조하십시오

       이는 HTML 객체들의 배열을 포함 JQuery와 객체를 반환 $ ( "TD")는의 jQuery 오브젝트를 확장하고 JQuery와 방법이있다. document.getElementsByTagName ( "TD")는 원시 JS의 방법이며 NodeList를 반환합니다. 이 문서를 참조하십시오

     • ---

       5.노드 목록 x.childNodes 객체 속성 또는 document.querySelectorAll () 메소드에 의해, 예를 들어 리턴 노드의 집합이다. 어떤 경우에는 노드 목록은 DOM의 변화를 자동으로 수집을 업데이트하는 수단은 살아 있습니다! 예를 들어,는 XMLNode.childNodes 라이브입니다 :

       노드 목록 x.childNodes 객체 속성 또는 document.querySelectorAll () 메소드에 의해, 예를 들어 리턴 노드의 집합이다. 어떤 경우에는 노드 목록은 DOM의 변화를 자동으로 수집을 업데이트하는 수단은 살아 있습니다! 예를 들어,는 XMLNode.childNodes 라이브입니다 :

       var c = parent.childNodes; //assume c.length is 2
       parent.appendChild(document.createElement('div'));
       //now c.length is 3, despite the `c` variable is assigned before appendChild()!!
       //so, do not cache the list's length in a loop.
       

       그러나 일부 다른 경우, 노드 목록은 DOM의 변경은 컬렉션의 내용에 영향을 미치지 않는 정적이다. querySelectorAll ()는 정적 노드 목록을 반환합니다.

       HTMLCollection 요소의 라이브 및 정렬 모음 (가 자동으로 기본 문서가 변경 될 때 업데이트됩니다)입니다. 이 같은 document.getElementsByTagName ()와 같은 어린이나 방법 같은 속성의 결과 일 수있다, 그리고는 HTMLElement 자신의 항목으로의에만 할 수있다.

       HTMLCollection는 모두 이름과 인덱스에 의해 속성으로 직접 멤버를 노출합니다 :

       var f = document.forms; // this is an HTMLCollection
       f[0] === f.item(0) === f.myForm //assume first form id is 'myForm'
       

       는 HTMLElement는 노드의 한 유형입니다 :

       노드는 여러 종류가 될 수 있습니다. 가장 중요한 역할을 한 사람은 다음과 같습니다 :

       따라서 큰 차이는 HTMLCollection 만 HTMLElements이 포함되어 있지만, NodeList를 또한 조각을 다음과 같이 그것을 확인 주석, 공백 문자 (캐리지 리턴 문자, 공간 ..) 등이 포함되어 있습니다 :

       함수 대하여 printList (X, 제목) { CONSOLE.LOG은 (+ 제목 + "(= 길이를"+ x.length + ")", "\ r은 \ nprinting"); 경우 (나는 파라 1

       2 파라

       HTMLCollection 및 NodeList를 모두 당신이 그들의 항목을 통해 루프를 사용할 수있는 길이 속성이 포함되어 있습니다. 스크립트가 단지 요소 개체를 처리해야 가정하면 그들은 또한 길이와 항목 특성과 원인의 오류를 열거하기 때문에, NodeLists의 항목을 열거하는 데에 ... 또는 각각에 대한 ... 사용하지 마십시오. 또한, for..in을 특정 순서로 속성을 방문하지 않을 수 있습니다.

       for (var i = 0; i < myNodeList.length; i++) {
         var item = myNodeList[i];
       }
       

     • ---

       6.그래서 많은 이미 말했지만, 도움이 될 HTMLCollection와 NodeList의 사이의 차이를 설명하기 위해 예로 대답 좀 더 요약 버전을 생각하고있다.

       그래서 많은 이미 말했지만, 도움이 될 HTMLCollection와 NodeList의 사이의 차이를 설명하기 위해 예로 대답 좀 더 요약 버전을 생각하고있다.

       우리는 다음과 같은 예를 더 명확하게 HTMLCollection와 NodeList의 차이점을 이해할 수있다. 더 나은 이해를 위해 자신의 브라우저 콘솔의 출력을 확인하여보십시오.

       <ul>
         <li>foo</li>
         <li>bar</li>
         <li>bar</li>
       </ul>
       

       // retrieve element using querySelectorAll
       const listItems_querySelector = document.querySelectorAll('li');
       console.log('querySelector', listItems_querySelector);
       
       // retrieve element using childNodes
       const list  = document.querySelector('ul')
       const listItems_childNodes = list.childNodes;
       console.log('childNodes', listItems_childNodes);
       const listItems_children = list.children;
       console.log('children', listItems_children);
       
       const listItems_getElementsByTagName = document.getElementsByTagName('li');
       console.log('getElementsByTagName', listItems_getElementsByTagName);
       
       console.log('*************************');
       console.log('add one list item');
       console.log('*************************');
       list.appendChild(document.createElement('li'));
       
       console.log('querySelector', listItems_querySelector);
       console.log('childNodes', listItems_childNodes);
       console.log('children', listItems_children);
       console.log('getElementsByTagName', listItems_getElementsByTagName);
       
       console.log('*************************');
       console.log('add one more list item');
       console.log('*************************');
       listItems_getElementsByTagName[0].parentNode.appendChild(document.createElement('li'));
       
       console.log('querySelector', listItems_querySelector);
       console.log('childNodes', listItems_childNodes);
       console.log('children', listItems_children);
       console.log('getElementsByTagName', listItems_getElementsByTagName); 
       

     from https://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects by cc-by-sa and MIT license