[javascript] HTMLCollection, NodeLists 및 객체 배열의 차이점

Question 1

DOM에 관해서는 항상 HTMLCollections, 객체 및 배열을 혼동했습니다. 예를 들어 …

document.getElementsByTagName("td")과 의 차이점은 무엇입니까 $("td")?
$("#myTable")와 $("td")객체 (jQuery를이 객체)입니다. console.log가 그 옆에 DOM 요소의 배열을 표시하는 이유는 무엇이며, 배열이 아니라 객체가 아닌가?
파악하기 어려운 “NodeLists”는 무엇이며 어떻게 선택합니까?

아래 스크립트에 대한 해석도 제공하십시오.

감사합니다

[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <title>Collections?</title>
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){
                console.log('[123,"abc",321,"cba"]=',[123,"abc",321,"cba"]);
                console.log('{123:123,abc:"abc",321:321,cba:"cba"}=',{123:123,abc:"abc",321:321,cba:"cba"});
                console.log('Node=',Node);
                console.log('document.links=',document.links);
                console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
                console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
                console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
                console.log('$("#myTable")=',$("#myTable"));
                console.log('$("td")=',$("td"));
            });
        </script>
    </head>

    <body>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <table id="myTable">
            <tr class="myRow"><td>td11</td><td>td12</td></tr>
            <tr class="myRow"><td>td21</td><td>td22</td></tr>
        </table>
    </body>
</html>

Question 2

먼저 NodeList와 의 차이점을 설명하겠습니다 HTMLCollection.

두 인터페이스 모두 DOM 노드의 모음 입니다. 제공하는 방법과 포함 할 수있는 노드 유형이 다릅니다. A는 동안 NodeList노드 유형을 포함 할 수 있습니다,는 HTMLCollection요소 노드 만 포함되어 있습니다.
는 HTMLCollectiona NodeList와 동일한 메서드와 namedItem.

컬렉션은 여러 노드에 대한 액세스를 제공해야 할 때 항상 사용됩니다. 예를 들어 대부분의 선택기 메서드 (예 getElementsByTagName:)는 여러 노드를 반환하거나 모든 자식 ( element.childNodes)에 대한 참조를 가져옵니다 .

자세한 내용은 DOM4 사양-컬렉션을 참조 하세요.

document.getElementsByTagName("td")과 의 차이점은 무엇입니까 $("td")?

getElementsByTagNameDOM 인터페이스의 메소드입니다. 태그 이름을 입력으로 받아들이고를 반환합니다 HTMLCollection( DOM4 사양 참조 ).

$("td")아마도 jQuery입니다. 유효한 CSS / jQuery 선택기를 받아들이고 jQuery 객체를 반환합니다.

표준 DOM 컬렉션과 jQuery 선택 간의 가장 큰 차이점은 DOM 컬렉션이 일반적으로 라이브라는 것입니다 (모든 메서드가 라이브 컬렉션을 반환하지는 않음). 즉, DOM에 대한 변경 사항이 영향을받는 경우 컬렉션에 반영된다는 것입니다. DOM 트리 의 보기 와 비슷 하지만 jQuery 선택은 함수가 호출 된 순간의 DOM 트리 스냅 샷입니다.

console.log가 그 옆에 DOM 요소의 배열도 표시하는 이유는 무엇입니까?

jQuery 객체는 배열과 유사한 객체입니다. 즉, 숫자 속성과 length속성이 있습니다 (배열은 객체 자체 일뿐입니다). 브라우저는 배열 및 배열과 유사한 객체를 [ ... , ... , ... ].

파악하기 어려운 “NodeLists”는 무엇이며 어떻게 선택합니까?

내 대답의 첫 번째 부분을 참조하십시오. s는 선택할 수 없으며 선택NodeList 의 결과 입니다.

내가 아는 한 NodeList프로그래밍 방식으로 s 를 생성하는 방법 (즉, 비어있는 것을 생성하고 나중에 노드를 추가 하는 방법)조차없는 한, 일부 DOM 메소드 / 속성에 의해서만 반환됩니다.

Question 3

0. an `HTMLCollection`과 a 의 차이점은 무엇입니까 `NodeList`?

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

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

HTMLCollection 인터페이스

HTMLCollection은 노드 목록입니다. 개별 노드는 서수 색인이나 노드의 이름 또는 ID 속성으로 액세스 할 수 있습니다. 참고 : HTML DOM의 컬렉션은 기본 문서가 변경 될 때 자동으로 업데이트됨을 의미하는 라이브로 간주됩니다.

DOM 레벨 3 사양-NodeList

인터페이스 NodeList

NodeList 인터페이스는이 컬렉션이 구현되는 방법을 정의하거나 제한하지 않고 정렬 된 노드 컬렉션의 추상화를 제공합니다. DOM의 NodeList 객체는 라이브입니다.

NodeList의 항목은 0부터 시작하는 정수 인덱스를 통해 액세스 할 수 있습니다.

따라서 둘 다 라이브 데이터를 포함 할 수 있습니다. 즉, 값이 업데이트되면 DOM이 업데이트됩니다. 또한 다른 기능 세트를 포함합니다.

tableDOM 요소에 a childNodes NodeList[2]와 a 가 모두 포함되어 있는 스크립트를 실행하는 경우 콘솔을 검사하면children HTMLCollection[1] . 왜 다른가요? 때문에 HTMLCollection요소 노드 만 포함 할 수있는 NodeList는 텍스트 노드가 포함되어 있습니다.

여기에 이미지 설명 입력

1. 차이점은 무엇입니까 `document.getElementsByTagName("td")` 과`$("td")` ?

document.getElementsByTagName("td")DOM 요소 (a NodeList) 의 배열을 반환하며 $("td"), 요소를 포함하는 jQuery 객체라고합니다.document.getElementsByTagName("td") 속성에 0, 1, 2, 등의 주요 차이점은 jQuery 오브젝트 조금 느린 검색 할 수 있지만 모든 편리한 액세스를 제공한다는 것이다 jQuery 함수.

2. `$("#myTable")` 및 `$("td")`개체 ( `jQuery`개체)입니다. 왜 `console.log`그 옆에 DOM 요소의 배열을 표시하고 있으며 배열이 아니라 객체가 아닌가?

속성을 가진 객체입니다 0.1 , 2, DOM 요소에 등을 설정합니다. 다음은 작동 원리에 대한 간단한 예입니다.

jsFiddle

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

3. 이해하기 어려운 “NodeLists”는 무엇이며 어떻게 선택합니까?

코드에서 검색하고 getElementsByClassName있으며 getElementsByTagName둘 다 NodeLists를 반환 합니다.

NodeList

Question 4

추가 참고 사항

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>

공백 : <ul id="myList"> <li>List item</li></ul>

공백 없음 : <ul id="myList"><li>List item</li></ul>

Question 5

$("td")확장 된 jQuery 객체이고 jQuery 메서드가 있으며 html 객체 배열을 포함하는 jquery 객체를 반환합니다. document.getElementsByTagName("td")원시 js 메서드이며 NodeList를 반환합니다. 이 기사보기

Question 6

있는 NodeList 객체는 x로, 예를 들어 반환 된 노드의 모음입니다. childNodes 속성 또는 document.querySelectorAll () 메서드. 어떤 경우에는 NodeList가 live 이므로 DOM의 변경 사항이 컬렉션을 자동으로 업데이트합니다! 예를 들어 Node.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.

그러나 다른 경우에는 NodeList가 static 이며 DOM의 변경 사항이 컬렉션의 콘텐츠에 영향을주지 않습니다. querySelectorAll () 은 정적 NodeList를 반환합니다.

HTMLCollection는 A는 라이브 및 정렬 요소의 컬렉션 (가 자동으로 기본 문서가 변경 될 때 업데이트됩니다). 이 같은 특성의 결과 일 수있다 아동 이나 같은 방법 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는 노드의 한 유형일뿐입니다.

노드는 여러 유형 이 될 수 있습니다 . 가장 중요한 것은 다음과 같습니다.

요소 (1) : <p>또는 같은 요소 노드<div> .
속성 (2) : 요소의 속성. 요소 속성은 더 이상 DOM4 사양에서 Node 인터페이스를 구현하지 않습니다!
텍스트 (3) : 요소 또는 속성의 실제 텍스트입니다.
comment (8) : 댓글 노드.
문서 (9) : 문서 노드.

따라서 큰 차이점은 HTMLCollection에는 HTMLElements 만 포함되어 있지만 NodeList에는 주석, 공백 텍스트 (캐리지 리턴 문자, 공백 ..) 등도 포함되어 있다는 것입니다. 다음 스 니펫에서 확인하십시오.

function printList(x, title) {
  console.log("\r\nprinting "+title+" (length="+x.length+"):");
  for(var i=0; i<x.length; i++) {
    console.log("  "+i+":"+x[i]);
  }
}

var elems = document.body.children; //HTMLCollection
var nodes = document.body.childNodes; //NodeList

printList(elems, "children [HTMLCollection]");
printList(nodes, "childNodes [NodeList]");

<div>para 1</div><!-- MyComment -->
<div>para 2</div>

스 니펫 확장

HTMLCollection과 NodeList는 모두 항목 을 반복 하는 데 사용할 수 있는 길이 속성을 포함합니다 . for … in 또는 for each … in을 사용하여 NodeLists의 항목을 열거하지 마십시오. 그들은 또한 길이와 항목 속성을 열거하고 스크립트가 요소 객체 만 처리해야한다고 가정하면 오류를 발생시키기 때문입니다. 또한 for..in은 특정 순서로 숙소 방문을 보장하지 않습니다.

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

Question 7

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

DOM의 노드 유형

다양한 노드 유형의 자식을 가질 수있는 12 가지 노드 유형이 있습니다.

다음 세 가지 속성을 사용하여 DOM의 노드를 검사하고 조회 할 수 있습니다.
- nodeType 특성
- nodeName 특성
- nodeValue 특성
이 nodeType속성은 지정된 노드의 노드 유형을 숫자로 반환합니다.
- 노드가 요소 노드이면 nodeType속성은 1 을 반환 합니다.
- 노드가 속성 노드 인 경우 nodeType속성은 2 를 반환 합니다.
- 노드가 텍스트 노드이면 nodeType속성은 3 을 반환 합니다.
- 노드가 주석 노드 인 경우 nodeType속성은 8 을 반환 합니다.
- 이 속성은 읽기 전용입니다.

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);

[javascript] HTMLCollection, NodeLists 및 객체 배열의 차이점

답변

답변

0. an `HTMLCollection`과 a 의 차이점은 무엇입니까 `NodeList`?

1. 차이점은 무엇입니까 `document.getElementsByTagName("td")` 과`$("td")` ?

2. `$("#myTable")` 및 `$("td")`개체 ( `jQuery`개체)입니다. 왜 `console.log`그 옆에 DOM 요소의 배열을 표시하고 있으며 배열이 아니라 객체가 아닌가?

3. 이해하기 어려운 “NodeLists”는 무엇이며 어떻게 선택합니까?

답변

추가 참고 사항

HTMLCollection과 NodeList의 차이점은 무엇입니까?

답변

답변

답변

DOM의 노드 유형

HTMLCollection 대 NodeList

답변

답변

답변

0. an HTMLCollection과 a 의 차이점은 무엇입니까 NodeList?

1. 차이점은 무엇입니까 document.getElementsByTagName("td") 과$("td") ?

2. $("#myTable") 및 $("td")개체 ( jQuery개체)입니다. 왜 console.log그 옆에 DOM 요소의 배열을 표시하고 있으며 배열이 아니라 객체가 아닌가?

3. 이해하기 어려운 “NodeLists”는 무엇이며 어떻게 선택합니까?

답변

추가 참고 사항

HTMLCollection과 NodeList의 차이점은 무엇입니까?

답변

답변

답변

DOM의 노드 유형

HTMLCollection 대 ​​NodeList

답변

0. an `HTMLCollection`과 a 의 차이점은 무엇입니까 `NodeList`?

1. 차이점은 무엇입니까 `document.getElementsByTagName("td")` 과`$("td")` ?

2. `$("#myTable")` 및 `$("td")`개체 ( `jQuery`개체)입니다. 왜 `console.log`그 옆에 DOM 요소의 배열을 표시하고 있으며 배열이 아니라 객체가 아닌가?

HTMLCollection 대 NodeList