Co zwracają metody querySelectorAll i getElementsBy *?

Czy getElementsByClassName(i podobne funkcje, takie jak getElementsByTagNamei querySelectorAll) działają tak samo, getElementByIdczy zwracają tablicę elementów?

Pytam o to, że próbuję zmienić styl wszystkich używanych elementów getElementsByClassName. Zobacz poniżej.

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

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

Twój getElementById()kod działa, ponieważ identyfikatory muszą być unikalne, dlatego funkcja zawsze zwraca dokładnie jeden element (lub nulljeśli go nie znaleziono).

Jednakże getElementsByClassName(), querySelectorAll(), i inne getElementsBy*metody zwrócić zbiór macierzy podobne elementy. Powtarzaj to tak, jak w przypadku prawdziwej tablicy:

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

Jeśli wolisz coś krótszego, rozważ użycie jQuery :

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

Używasz tablicy jako obiektu, różnica między getElementbyIdi getElementsByClassNamejest taka, że:

• getElementbyIdzwróci obiekt Element lub wartość null, jeśli nie zostanie znaleziony żaden element o identyfikatorze
• getElementsByClassNamezwróci aktywny HTMLCollection , prawdopodobnie o długości 0, jeśli nie zostaną znalezione żadne pasujące elementy

getElementsByClassName

getElementsByClassName(classNames)Metoda pobiera ciąg, który zawiera nieuporządkowana zestaw unikatowych tokenów oddzielonych spacjami reprezentujących klas. Po wywołaniu metoda musi zwrócić aktywny NodeListobiekt zawierający wszystkie elementy w dokumencie, które mają wszystkie klasy określone w tym argumencie, po uzyskaniu klas przez podzielenie ciągu na spacje. Jeśli w argumencie nie określono żadnych tokenów, metoda musi zwrócić pustą listę NodeList.

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

getElementById

Metoda getElementById () uzyskuje dostęp do pierwszego elementu o określonym identyfikatorze.

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

w twoim kodzie linie:

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

NIE będzie działać zgodnie z oczekiwaniami, ponieważ getElementByClassNamezwróci tablicę, a tablica NIE będzie miała stylewłaściwości, do każdej elementz nich można uzyskać dostęp poprzez iterację.

Dlatego funkcja getElementByIddziałała dla Ciebie, ta funkcja zwróci bezpośredni obiekt. Dzięki temu będziesz mógł uzyskać dostęp do stylenieruchomości.

Poniższy opis pochodzi z tej strony :

Metoda getElementsByClassName () zwraca kolekcję wszystkich elementów w dokumencie o określonej nazwie klasy jako obiekt NodeList.

Obiekt NodeList reprezentuje kolekcję węzłów. Dostęp do węzłów można uzyskać za pomocą numerów indeksu. Indeks zaczyna się od 0.

Porada: Możesz użyć właściwości length obiektu NodeList do określenia liczby elementów o określonej nazwie klasy, a następnie możesz przejrzeć wszystkie elementy w pętli i wyodrębnić żądane informacje.

Zatem jako parametr getElementsByClassNamezaakceptowałby nazwę klasy.

Jeśli to jest Twoja treść HTML:

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

wtedy var menuItems = document.getElementsByClassName('menuItem')zwróci kolekcję (nie tablicę) 3 górnych <div>s, ponieważ pasują one do podanej nazwy klasy.

Następnie możesz iterować po tej <div>kolekcji węzłów ( w tym przypadku) za pomocą:

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

Więcej informacji na temat różnic między elementami i węzłami można znaleźć w tym poście .

ES6 zapewnia Array.from()metodę, która tworzy nową instancję Array z obiektu przypominającego tablicę lub iterowalnego obiektu.

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>

Jak widać we fragmencie kodu, po użyciu Array.from()funkcji możesz następnie manipulować każdym elementem.

To samo rozwiązanie przy użyciu 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>

Innymi słowy

• document.querySelector()Wybiera tylko pierwszy jednego elementu określonego przełącznika. Więc nie wypluwa tablicy, to pojedyncza wartość. Podobnie jak w przypadku document.getElementById()pobierania tylko elementów identyfikatora, ponieważ identyfikatory muszą być unikalne.

• document.querySelectorAll()wybiera wszystkie elementy z określonym selektorem i zwraca je w tablicy. Podobnie jak tylko document.getElementsByClassName()dla klas i document.getElementsByTagName()tagów.

Dlaczego warto korzystać z querySelector?

Jest używany wyłącznie w celu ułatwienia i zwięzłości.

Dlaczego warto korzystać z getElement / sBy? *

Szybsza wydajność.

Skąd ta różnica w wydajności?

Oba sposoby wyboru mają na celu utworzenie NodeList do dalszego użytku. querySelectors generuje statyczną listę NodeList z selektorami, dlatego należy ją najpierw utworzyć od podstaw.
getElement / sBy * natychmiast dostosowuje istniejącą na żywo listę NodeList bieżącego DOM.

Kiedy więc użyć której metody, zależy to od Ciebie / Twojego projektu / Twojego urządzenia.

Infos

Demo wszystkich metod Test wydajności
dokumentacji NodeList

Zwraca listę podobną do tablicy.

Zrobisz to jako Array jako przykład

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

Możesz uzyskać pojedynczy element, uruchamiając

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

ale zadziała dla pierwszego elementu z klasą .myElement.

Jeśli chcesz zastosować to do wszystkich elementów z klasą, proponuję użyć

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

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

Z ES5 + (dowolne przeglądane obecnie - 2017) powinieneś być w stanie to zrobić

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});

Odpowiedź na konkretny przypadek Drenzii ...

Możesz stworzyć funkcję, która będzie działać dla dowolnego wordelementu i przekazać numer tego, który chcesz przekształcić, na przykład:

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