왜 JavaScript의 getElementsByClassName이 배열이 아닌 객체를 제공합니까?

Question

특정 클래스 이름이있는 페이지의 모든 요소에 대해 JavaScript로 jQuery를 사용하지 않고 목록을 가져 오려고합니다. I 클래스 내 페이지에 세 개의 앵커 요소가

var expand_buttons = document.getElementsByClassName('expand'); 
console.log(expand_buttons, expand_buttons.length, expand_buttons[0]); 

주 '확장'다음과 같이 그래서 저는 getElementsByClassName() 함수를 사용합니다. 이 CONSOLE.LOG()는 출력

[] 0 undefined 

다음

다음에, 차기위한 I 자체 배열 expand_buttons 던져 이 갑자기

[NodeList[3]] 1 

를 출력하고, I는 클릭

var newArray = new Array(expand_buttons); 
console.log(newArray, newArray.length); 

nodelist를 통해 페이지의 세 가지 '확장'앵커 요소의 속성을 확인합니다. w3schools test page에서 코드 작업을 수행 할 수 있다는 점도 주목할 가치가 있습니다.

실제로 document.getElementsByName을 사용하면 요소 배열을 출력 (콘솔에 출력)하지만 그 길이를 묻는 경우 0으로 표시됩니다. 마찬가지로 액세스하려고하면 array_name[0]을 사용하는 배열 요소는 콘솔에 개체를 인쇄 할 때 배열의 요소가 분명히 있음에도 불구하고 'undefined'를 출력합니다.

누구에게 이것이 어떨까요? DOM 엘리먼트를 반복하고 싶습니다. 바닐라 자바 ​​스크립트로 코딩을 연습하려고하기 때문에 지금은 jQuery를 피합니다.

감사합니다,

ParagonRG

Answer 1

는 웹 브라우저의 일로서 그것은 순전히 자바 스크립트 것입니다. 이 API는 네이티브 객체 (document 객체)에 의해 제공되고 DOM 사양에 의해 NodeList 객체를 반환합니다. NodeList는 배열처럼 취급 할 수 있으며 비슷하지만 뚜렷하게 다릅니다 (사용자가 알아 차렸 듯이).

당신은 항상 새로운 배열에 NodeList를 복사 할 수 있습니다

:

var nodeArr = Array.prototype.slice.call(theNodeList, 0); 

또는 현대 ES2015 환경에서 :

var nodeArr = Array.from(theNodeList); 

자바 스크립트는 항상 어떤 런타임 환경에 존재하고 상황에 맞는 모든 종류를 포함 할 수 있습니다 JavaScript 코드에 기능을 제공하는 API 웹 브라우저는 이러한 맥락 중 하나입니다. DOM은 JavaScript와는 부분적으로 다른 방식으로 지정됩니다. 언어 중립적 인 인터페이스 정의입니다.

이 답변의 짧은 버전은 "그냥 사용하기 때문에"라고 생각합니다. 대상이 returns is "live"는, 특별히 라이브 NodeList 때문에

Answer 2

그것은 배열을 반환하지 않습니다

대부분의 경우, 노드 목록 라이브 모음입니다. 즉, DOM 트리의 변경 사항이 컬렉션에 반영됩니다.