programing

HTMLCollection, NodeLists, 객체 배열 간의 차이

minimums 2023. 10. 5. 21:26
반응형

HTMLCollection, NodeLists, 객체 배열 간의 차이

저는 항상 DOM과 관련하여 HTML 컬렉션, 객체, 배열을 혼동해 왔습니다.예를 들면...

  1. 입니까의 입니까?document.getElementsByTagName("td")그리고.$("td")?
  2. $("#myTable")그리고.$("td")개체(jQuery 개체)입니다.에도 옆에 요소의 는 무엇이며, 이 배열도 console.log는 DOM이며,다.
  3. 찾기 힘든 "노드 리스트"란 무엇이며, 어떻게 선택해야 합니까?

아래 스크립트에 대한 해석도 부탁드립니다.

[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>

하겠습니다.NodeList그리고.HTMLCollection.

두 인터페이스 모두 DOM 노드의 모음입니다.제공하는 방법과 포함할 수 있는 노드 유형이 다릅니다.그 동안에.NodeList임의의 노드 유형을 포함할 수 있습니다.HTMLCollectionElement 노드만 포함하도록 되어 있습니다.
nHTMLCollection는 A와합니다.NodeList으로 법"라고 불리는 .namedItem.

) 됩니다와 같이 할 때 됩니다.getElementsByTagName 에 (element.childNodes).

자세한 내용은 DOM4 사양 - Collections에서 확인할 수 있습니다.

입니까의 입니까?document.getElementsByTagName("td")그리고.$("td")?

getElementsByTagName는 DOM 인터페이스의 메서드입니다.다합니다.HTMLCollection(DOM4 사양 참조).

$("td")j일 겁니다.Query로 추정됩니다.유효한 CSS/jQuery 셀렉터를 허용하고 jQuery 개체를 반환합니다.

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

console.log가 옆에 있는 DOM 요소의 배열을 표시하는 이유는 무엇이며, 이 요소들은 객체도 아니고 배열도 아닙니다.

jQuery 개체는 배열과 같은 개체로, 숫자 속성과 a를 갖습니다.length속성(array는 단지 객체 그 자체라는 것을 명심해야 합니다).다와 및 과 유사한 이 있습니다.[ ... , ... , ... ].

찾기 힘든 "노드 리스트"란 무엇이며, 어떻게 선택해야 합니까?

제 대답의 첫 부분을 보세요.선택할 수 없습니다. NodeLists, 선택의 결과입니다.

제가 아는 한, 창조할 방법조차 없습니다.NodeLists는 프로그램적으로(즉, 빈 노드를 생성하고 나중에 노드를 추가), 일부 DOM 메서드/속성에 의해서만 반환됩니다.

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

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

DOM 레벨 1 규격 - 기타 개체 정의:

인터페이스 HTML 모음

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

DOM 레벨 3 규격 - 노드 목록

인터페이스 노드 목록

NodeList 인터페이스는 이 컬렉션이 구현되는 방법을 정의하거나 제한하지 않고 순서가 지정된 노드 컬렉션의 추상화를 제공합니다.DOM의 NodeList 개체가 활성 상태입니다.

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

따라서 둘 다 라이브 데이터를 포함할 수 있습니다. 즉, 값이 업데이트되면 DOM이 업데이트됩니다.이들은 또한 다양한 기능들을 포함하고 있습니다.

스크립트를 실행하면 콘솔을 검사할 때 다음과 같은 내용이 표시됩니다.tableDOM 요소가 둘 다 포함되어 있습니다.childNodes NodeList[2]그리고.children HTMLCollection[1]. 그들은 왜 다릅니까?왜냐면HTMLCollection요소 노드만 포함할 수 있으며 NodeList에는 텍스트 노드도 포함됩니다.

enter image description here

1. 사이의 차이점은 무엇입니까?document.getElementsByTagName("td")그리고.$("td")?

document.getElementsByTagName("td")DOM 요소 배열을 반환합니다(a).NodeList),$("td")다음과 같은 요소를 가진 jQuery 객체라고 합니다.document.getElementsByTagName("td")그 성질상0,1,2, 등. 주요 차이점은 jQuery 오브젝트가 검색 속도가 조금 느리지만 모든 편리한 jQuery 기능에 접근할 수 있다는 것입니다.

2. $("#myTable")그리고.$("td")objects(객체jQuery(객체)왜가.console.log또한 DOM 요소의 배열을 옆에 표시하며, 그것들은 객체가 아니고 배열이 아닌가요?

그들은 그들의 속성을 가진 물체입니다.0,1,2, 등을 DOM 요소로 설정합니다.간단한 예는 다음과 같습니다. 작동 방식은 다음과 같습니다.

jsFiddle

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

3. 찾기 힘든 "노드 리스트"란 무엇이며, 어떻게 선택해야 합니까?

getElementsByClassName그리고.getElementsByTagName 겸용hNodeLists

NodeList

가감주

HTML 컬렉션과 노드 목록의 차이점은 무엇입니까?

HTML 컬렉션에는 요소 노드(태그)만 포함되고 NodeList에는 모든 노드가 포함됩니다.

가장 중요한 노드 유형:

  1. 요소 노드
  2. 속성 노드
  3. 텍스트 노드
  4. 댓글노드

노드 유형

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

다음을 고려합니다.

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

Difference between HTMLCollection and a NodeList

이미 했습니다 했지만 을 설명하기 더 을 생각했습니다.HTMLCollection그리고.NodeList도움이 될 겁니다

DOM의 노드 유형

  • 12개의 다른 노드 유형이 있으며 다양한 노드 유형의 자식을 가질 수 있습니다.

enter image description here

  • 다음 세 가지 속성을 사용하여 DOM의 노드를 검사하고 문의할 수 있습니다.

    • nodeType
    • nodeName
    • nodeValue

  • nodeType합니다.

    • nodeType부동산은 1을 반환합니다.
    • nodeType부동산은 2를 반환합니다.
    • nodeType재산은 3을 반환할 것입니다.
    • nodeType재산은 8을 반환할 것입니다.
    • 이 속성은 읽기 전용입니다.

HTML 컬렉션 대 노드 목록

enter image description here

는 할 수 .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);

$("td")확장 jQuery 객체이며 jQuery 메서드를 사용하며 html 객체 배열이 포함된 jquery 객체를 반환합니다.document.getElementsByTagName("td")raw js 메서드이며 NodeList를 반환합니다.이 기사 참조

노드 목록 개체는 x.childNode 속성 또는 문서에 의해 반환되는 Node의 컬렉션입니다.querySelectorAll() 메서드를 선택합니다.NodeList가 활성 상태인 경우가 있는데, 이는 DOM의 변경 사항이 자동으로 컬렉션을 업데이트한다는 것을 의미합니다!예를 들어, Node.childNode는 live:

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가 정적이고, 여기서 DOM의 변경 사항은 컬렉션의 내용에 영향을 미치지 않습니다.querySelectorAll()은 정적 노드 목록을 반환합니다.

HTML Collection은 실시간으로 순서화된 요소 모음입니다(기본 문서가 변경되면 자동으로 업데이트됨).하위와 같은 속성이나 document.getElementsByTagName()과 같은 메서드의 결과일 수 있으며 항목으로 HTMLElements만 가질 수 있습니다.

HTMLCollection은 또한 구성원을 이름과 색인에 의한 속성으로 직접 노출합니다.

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

HTML 요소는 노드의 한 가지 유형일 뿐입니다.

Node << HTMLElement inheritance

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

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

따라서 HTML Collection에는 HTML 요소만 포함되어 있지만 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 모두 항목을 루프오버하는 데 사용할 수 있는 길이 속성을 포함합니다.NodeLists의 항목을 열거할 때는...in 또는 각...in에 사용하지 마십시오. 스크립트에서 요소 개체만 다루면 된다고 가정하면 해당 항목의 길이와 항목 속성이 열거되고 오류가 발생합니다.또한..in은 특정 순서로 속성을 방문하는 것을 보장하지 않습니다.

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

언급URL : https://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects

반응형

'programing' 카테고리의 다른 글

mysql 레코드 생성 타임스탬프 자동 저장  (0) 2023.10.10
내용 길이에 따라 크기를 조정할 텍스트 영역  (0) 2023.10.10
Jquery 배경색 변경  (0) 2023.10.05
GraphQL ID를 고객의 문자열로 처리해야 합니까?  (0) 2023.10.05
Angular에서 선택한 사용 예가 필요합니다.JS입력양식  (0) 2023.10.05

'programing'의 다른글

  • 현재글HTMLCollection, NodeLists, 객체 배열 간의 차이

관련글

댓글

티스토리툴바