querySelectorAll 및 getElementsBy * 메소드는 무엇을 리턴합니까?


151

getElementsByClassName(와 같은 유사한 기능 getElementsByTagNamequerySelectorAll) 작업과 동일 getElementById하거나 요소의 배열을 반환합니까?

내가 묻는 이유는를 사용하여 모든 요소의 스타일을 변경하려고하기 때문 getElementsByClassName입니다. 아래를 참조하십시오.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

37
단서는 그 이름이 매우 많다 : getElementsByClassName()복수를 getElementById()의미하는 반면 단수의 요소를 의미한다.
데이비드 모니카

1
나는 그것을 얻었습니다. 배열을 반복하는 대신 위의 코드를 사용하여 해당 클래스 이름을 가진 모든 요소를 ​​변경할 수 없다는 것이 의미가 없었습니다. jquery 방법이 훨씬 낫다, 나는 단지 js 방법에 대해 궁금했다
dmo

1
유용 할 수도 있습니다 : stackoverflow.com/questions/3871547/…
kapa

답변:


152

귀하의 getElementById()ID를 고유 할 필요 때문에 함수가 항상 정확히 하나 개의 요소를 반환 (또는 이후 코드는 작동 null아무것도 발견되지 않은 경우).

그러나 getElementsByClassName(), querySelectorAll()및 다른 getElementsBy*방법은 요소들의 어레이 형상 컬렉션을 반환. 실제 배열을 사용하는 것처럼 반복하십시오.

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

더 짧은 것을 선호한다면 jQuery 사용을 고려하십시오 .

$('.myElement').css('size', '100px');

1
그 또한 적용됩니까 <iframe>하는 것은 또한 도메인의 일부입니다
JMASTER B

3
2018 년입니다 ... 래퍼 함수를 ​​작성 querySelectorAll()하면 크고 오래된 학교 종속성없이 멋진 짧은 코드를 가질 수 있습니다. qSA(".myElement").forEach(el => el.style.size = "100px")랩퍼에 콜백이 수신 될 수 있습니다. qSA(".myElement", el => el.style.size = "100px")

2
"더 짧은 것을 선호한다면, 프로젝트에 거대한 라이브러리를 추가하는 것을 고려하십시오"2012 년이 다른 시간이라는 것을 알고 있습니다.
CoryCoolguy

1
" 실제 배열을 사용하는 것처럼 반복합니다. 주의해서 getElementsByClassName 은 루프 중에 예기치 않게 수정 될 수 있는 라이브 NodeList를 반환합니다 ( 예 : 선택한 클래스 이름이 제거 된 경우). ;-)
RobG

20

배열을 객체로 사용하고 있는데 차이점은 다음 getElementbyIdgetElementsByClassName같습니다.

getElementsByClassName

getElementsByClassName(classNames)메소드는 클래스를 나타내는 정렬되지 않은 고유 한 공백으로 분리 된 토큰 세트를 포함하는 문자열을 사용합니다. 호출되면 메소드는 라이브를 리턴해야합니다. NodeList 해당 인수에 지정된 모든 클래스가있는 문서의 모든 요소가 포함 객체를 합니다. 인수에 지정된 토큰이 없으면 메소드는 빈 NodeList를 리턴해야합니다.

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

getElementById () 메소드는 지정된 ID를 가진 첫 번째 요소에 액세스합니다.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

코드에서 라인 :

1- document.getElementsByClassName ( 'myElement'). style.size = '100px';

것입니다 NOT 때문에, 예상대로 작동 getElementByClassName배열을 반환하며, 배열이됩니다 NOTstyle속성은 각 액세스 할 수 있습니다 element그들을 통해 반복하는 의해합니다.

그것이 getElementById함수가 당신을 위해 일한 이유입니다. 이 함수는 직접 객체를 반환합니다. 따라서 당신은 style속성 에 액세스 할 수 있습니다.


참고는 것을 WHATWG 사양 브라우저에 의해 구현되고 어떻게 여기 W3C의 것과 다를, 전 (따라서 현재 브라우저) getElementsByClassName에 대한 HTMLCollection하지 NodeList를 돌려줍니다. 미미하지만 일부는 혼동 될 수 있습니다.
Kaiido

@ Kaiido— 실제 차이점은 ...? 이해하기 위해 NodeList 는 DOM 요소의 일반적인 모음이며 HTML DOM (예 : XML DOM)뿐만 아니라 모든 DOM에서 사용할 수 있지만 HTMLCollection은 HTML DOM 용입니다 (분명히). 내가 볼 수있는 유일한 차이점 은 HTMLCollectionnamedItem 메소드입니다 .
RobG

PS Nit pick : WHATWG HTML Living StandardW3C HTML 5.2 표준 링크 . 선택에 의해 버릇. ;-) 그래도 제기 한 점과 차이가 없습니다.
RobG

@RobG NodeList에는 HTMLCollection에서 액세스 할 수없는 많은 메서드 가 있습니다.
Kaiido

@ Kaiido— 확실하지만, forEach 는 W3C 또는 WHATWG에 의해 콜렉션 또는 NodeList에 대한 인터페이스의 일부로 지정되지 않으며, 별도로 지정됩니다 (예 : Web IDL 스펙 에서 일반 콜렉션의 특성으로 지정 되므로 콜렉션 및 NodeList 모두에 적용 되어야 함) ( getElementsByClassName에 의해 반환 된 컬렉션 에 forEach 메서드 가 없다는 점에 동의합니다 ). 결론은 좋은 대답을할만한 충분한 이야기가 있다는 것입니다. :-)
RobG

11

이 페이지 에서 다음 설명 이 제공됩니다 .

getElementsByClassName () 메소드는 지정된 클래스 이름을 가진 문서의 모든 요소 콜렉션을 NodeList 오브젝트로 리턴합니다.

NodeList 오브젝트는 노드 콜렉션을 나타냅니다. 노드는 색인 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작합니다.

팁 : NodeList 객체의 length 속성을 사용하여 지정된 클래스 이름을 가진 요소 수를 결정한 다음 모든 요소를 ​​반복하고 원하는 정보를 추출 할 수 있습니다.

따라서 매개 변수 getElementsByClassName로 클래스 이름을 사용할 수 있습니다.

이것이 HTML 본문 인 경우 :

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

그런 다음 주어진 클래스 이름과 일치하므로 var menuItems = document.getElementsByClassName('menuItem')3 개의 상위 컬렉션 (배열이 아닌)을 반환합니다 <div>.

그런 다음 다음을 사용하여이 노드 ( <div>이 경우 s) 콜렉션 을 반복 할 수 있습니다 .

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

요소와 노드의 차이점에 대한 자세한 내용은 이 게시물 을 참조하십시오 .


11

ES6Array.from()배열과 유사하거나 반복 가능한 객체로부터 새로운 Array 인스턴스를 생성하는 메소드를 제공 합니다.

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

코드 스 니펫 내부에서 볼 수 있듯이 Array.from()함수를 사용한 후 각 요소를 조작 할 수 있습니다.


를 사용하는 동일한 솔루션 jQuery입니다.

$('.box').css({'background':'green'});
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>


7

다시 말해

  • document.querySelector()선택 만 제 지정된 선택기 엘리먼트. 따라서 배열을 내뱉지 않으며 단일 값입니다. document.getElementById()ID는 고유해야하기 때문에 ID 요소 만 가져 오는 것과 유사합니다 .

  • document.querySelectorAll()선택 모든 배열 내의 지정된 셀렉터 요소들을 반환. document.getElementsByClassName()클래스 및 document.getElementsByTagName()태그 와 유사합니다 .


왜 querySelector를 사용합니까?

편리함과 간결함을 위해서만 사용됩니다.


왜 getElement / sBy를 사용합니까? *

더 빠른 성능.


왜이 성능 차이가 있습니까?

두 가지 선택 방법 모두 나중에 사용할 수 있도록 NodeList 를 작성하는 목적이 있습니다. querySelectors 는 선택기를 사용하여 정적 NodeList를 생성하므로 처음부터 새로 작성해야합니다.
getElement / sBy * 는 현재 DOM의 기존 라이브 NodeList를 즉시 조정합니다.

따라서 어떤 방법을 사용해야할지는 사용자 / 프로젝트 / 장치에 달려 있습니다.


정보

모든 방법의 데모
NodeList Documentation
Performance Test


4

배열과 같은 목록을 반환합니다.

예를 들어 배열로 만듭니다.

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);  

4

당신은 실행하여 단일 요소를 얻을 수 있습니다

document.querySelector('.myElement').style.size = '100px';

그러나 .myElement 클래스를 가진 첫 번째 요소에서 작동합니다.

클래스의 모든 요소에 이것을 적용하려면 사용하는 것이 좋습니다.

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});

4
/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name


0

Drenzii의 특정 사례에 대한 답변 ...

다음과 같이 모든 word요소에 대해 작동 하고 변환하려는 요소 의 수를 전달 하는 함수를 만들 수 있습니다.

// Binds `wordButtons` to an (array-like) HTMLCollection of buttons
const wordButtons = document.getElementsByClassName("word");

// Applies the `slantWord` function to the first word button
slantWord(1);

// Defines the `slantWord` function
function slantWord(wordNumber) {
  const index = wordNumber - 1; // Collection index is zero-based
  wordButtons[index].style.transform = "rotate(7deg)"; // Transforms the specified button
}
<div class="wordGameContainer">
  <button class="word word1">WORD 1</button>
  <button class="word word2">WORD 2</button>
  <button class="word word3">WORD 3</button>
  <button class="word word4">WORD 4</button>
</div>

<div>
  <button onclick="moveWord()" class="playButton">PLAY</button>
</div>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.