Czy getElementsByClassName
(i podobne funkcje, takie jak getElementsByTagName
i querySelectorAll
) działają tak samo, getElementById
czy 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';
getElementsByClassName()
implikuje liczbę mnogą, podczas gdygetElementById()
implikuje pojedynczy element elementowy.Odpowiedzi:
Twój
getElementById()
kod działa, ponieważ identyfikatory muszą być unikalne, dlatego funkcja zawsze zwraca dokładnie jeden element (lubnull
jeśli go nie znaleziono).Jednakże
getElementsByClassName()
,querySelectorAll()
, i innegetElementsBy*
metody zwrócić zbiór macierzy podobne elementy. Powtarzaj to tak, jak w przypadku prawdziwej tablicy:Jeśli wolisz coś krótszego, rozważ użycie jQuery :
źródło
<iframe>
co jest również częścią Twojej domenyquerySelectorAll()
i możesz mieć ładny, krótki kod bez dużej, starej szkoły zależności.qSA(".myElement").forEach(el => el.style.size = "100px")
Może niech opakowanie otrzyma oddzwonienie.qSA(".myElement", el => el.style.size = "100px")
Używasz tablicy jako obiektu, różnica między
getElementbyId
igetElementsByClassName
jest taka, że:getElementbyId
zwróci obiekt Element lub wartość null, jeśli nie zostanie znaleziony żaden element o identyfikatorzegetElementsByClassName
zwróci aktywny HTMLCollection , prawdopodobnie o długości 0, jeśli nie zostaną znalezione żadne pasujące elementygetElementsByClassName
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname
getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
w twoim kodzie linie:
NIE będzie działać zgodnie z oczekiwaniami, ponieważ
getElementByClassName
zwróci tablicę, a tablica NIE będzie miałastyle
właściwości, do każdejelement
z nich można uzyskać dostęp poprzez iterację.Dlatego funkcja
getElementById
działała dla Ciebie, ta funkcja zwróci bezpośredni obiekt. Dzięki temu będziesz mógł uzyskać dostęp dostyle
nieruchomości.źródło
Poniższy opis pochodzi z tej strony :
Zatem jako parametr
getElementsByClassName
zaakceptowałby nazwę klasy.Jeśli to jest Twoja treść HTML:
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ą:Więcej informacji na temat różnic między elementami i węzłami można znaleźć w tym poście .
źródło
ES6 zapewnia
Array.from()
metodę, która tworzy nową instancję Array z obiektu przypominającego tablicę lub iterowalnego obiektu.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
.źródło
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 przypadkudocument.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 tylkodocument.getElementsByClassName()
dla klas idocument.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
źródło
Zwraca listę podobną do tablicy.
Zrobisz to jako Array jako przykład
źródło
Możesz uzyskać pojedynczy element, uruchamiając
ale zadziała dla pierwszego elementu z klasą .myElement.
Jeśli chcesz zastosować to do wszystkich elementów z klasą, proponuję użyć
źródło
źródło
Z ES5 + (dowolne przeglądane obecnie - 2017) powinieneś być w stanie to zrobić
źródło
Odpowiedź na konkretny przypadek Drenzii ...
Możesz stworzyć funkcję, która będzie działać dla dowolnego
word
elementu i przekazać numer tego, który chcesz przekształcić, na przykład:źródło