javascript의 NodeList 객체

Question

NodeList가 어떤 객체인지 알 수 있습니다. 배열과 같은 객체이고 괄호 표기법을 통해 액세스 할 수 있다고 읽었습니다 (예 : var a = someNode.childNode[0];). 우리가 객체의 속성에만 접근 할 수 있고, 우리가 가질 수 없다는 것을 알고 있기 때문에 어떻게 가능합니까?

Answer 1

NodeLists는 "live"입니다. 즉, 문서 구조가 변경 될 때 업데이트됩니다. 그들은 가장 정확한 정보를 항상 최신 상태로 유지합니다. 실제로 모든 NodeList 객체는 액세스 할 때마다 DOM에 대해 실행되는 쿼리입니다.

는 NodeList를을 반복 할 때마다, 그 변수에 반복자를 비교 한 후 길이가 두 번째 변수를 초기화하는 것이 가장 좋습니다 :

var divs = document.getElementsByTagName("div"); 

for (var i=0, lens=divs.length; i < len; i++){ 
    var div = document.createElement("div"); 
    document.body.appendChild(div); 
} 

NodeList의이 같은 구조 배열이지만 실제로는 아니다 배열. 대괄호 표기법을 사용하여 배열 값에 액세스 할 수 있습니다.

Answer 2

NodeList는 핵심 Javascript 객체가 아니며 브라우저와 DOM을 통해 제공됩니다. 동적 또는 라이브 객체에 대한 인터페이스를 반환하는 함수를 생각해보십시오. forEach()는 사용할 수 없지만이를 실제 배열로 변환하여 예를 들어 다음과 같은 스냅 샷을 만들 수 있습니다.

// turns nodelist into an array to enable forEach 
function toArray(list) { 
    var i, array = []; 
    for (i=0; i<list.length;i++) {array[i] = list[i];} 
    return array; 
} 

세부 사항 : http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Answer 3

NodeList가 호스트 객체이며, 기본 자바 스크립트 객체에 적용되는 일반적인 규칙이 적용되지 않습니다. 따라서 length 속성과 대괄호 속성 액세스 구문을 통한 해당 멤버에 대한 액세스로 구성된 문서화 된 API를 고수해야합니다. 당신은 노드 목록의 구성원의 스냅 샷을 포함하는 Array 만들려면이 API를 사용할 수 있습니다

var nodeList = document.getElementsByTagName("div"); 
var nodeArray = []; 
for (var i = 0; i < nodeList.length; ++i) { 
    nodeArray[i] = nodeList[i]; 
} 

Answer 4

자바 스크립트 알코올처럼, 그것은 강요 할 수

var links = document.getElementsByTagName('a'); 
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) { 
    anchor.addEventListener('click', onClickFN, false); 
}); 

Answer 5

NodeList이 DOM elements의 모음입니다. 그것은 배열과 같습니다 (그러나 그렇지 않습니다). 이를 사용하려면 일반 JavaScript 배열로 변환해야합니다. 다음 스 니펫을 통해 작업을 완료 할 수 있습니다.

const nodeList = document.getElementsByClassName('.yourClass'), 
     nodeArray = [].slice.call(nodeList); 

Answer 6

노드 목록은 종종 필터가있는 노드 반복자로 구현됩니다. 즉 길이가 같은 속성을 얻는 것은 O(n)이며 길이를 다시 확인하여 목록을 반복하는 것은 O (n^2)가됩니다.

var paragraphs = document.getElementsByTagName('p'); 
for (var i = 0; i < paragraphs.length; i++) { 
    doSomething(paragraphs[i]); 
} 

대신이 작업을 수행하는 것이 좋습니다 :이

var paragraphs = document.getElementsByTagName('p'); 
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) { 
    doSomething(paragraph); 
} 

이 한 배열이 부울 거짓으로 취급하는 일을 포함하지 않는 모든 컬렉션과 배열에 적합합니다.

childNodes를 반복하는 경우 firstChild 및 nextSibling 속성을 사용할 수도 있습니다.

var parentNode = document.getElementById('foo'); 
for (var child = parentNode.firstChild; child; child = child.nextSibling) { 
    doSomething(child); 
} 

Answer 7

이제 ES2015에서 당신은 어떤 배열과 같은 객체 배열 인스턴스를 생성 Array.from 방법을 사용할 수있다, 그래서 이것은 작동합니다 :

const divList = Array.from(document.getElementsByTagName("div")); 

자세한 내용은 다음 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from