Element.
Żywa kolekcja bezpośrednich dzieci elementu. Razem z parentElement i nextElementSibling służy do poruszania się po drzewie DOM.
- Zwraca
- Żywą kolekcję
HTMLCollectionz elementami-dziećmi (może być pusta). Pozostałe właściwości zwracają element albonull.
Przykład
#const modules = document.querySelector('#modules')
const current = modules.querySelector('.current')
console.log(modules.children.length)
console.log(modules.children[0].textContent)
console.log(current.nextElementSibling.textContent)
console.log(current.parentElement)
console.log(modules.lastElementChild.nextElementSibling)Definicja i zastosowanie
#Właściwość children zwraca kolekcję HTMLCollection z bezpośrednimi dziećmi elementu, czyli elementami zagnieżdżonymi o jeden poziom niżej. Pomija węzły tekstowe i komentarze, więc spacje i znaki nowej linii z kodu HTML nie przeszkadzają. Liczbę dzieci odczytasz z children.length, a konkretne dziecko przez indeks, np. list.children[0].
Kolekcja jest „żywa”: gdy dodasz lub usuniesz dziecko, zmiana od razu pojawi się w children. Nie ma metod tablicowych, takich jak map() czy forEach(), ale łatwo zamienisz ją na tablicę przez Array.from() albo [...element.children].
Do poruszania się po drzewie służy cała rodzina właściwości: parentElement wskazuje rodzica, firstElementChild i lastElementChild pierwsze i ostatnie dziecko, a nextElementSibling i previousElementSibling sąsiednie elementy na tym samym poziomie. Gdy takiego elementu nie ma, dostajesz null.
Uważaj na podobne nazwy bez słowa „Element”: childNodes, firstChild czy nextSibling zwracają wszystkie węzły, także tekstowe. Zwykle to nie to, czego szukasz.
Składnia
#element.children
element.children.length
element.children[index]
element.parentElement
element.firstElementChild
element.lastElementChild
element.nextElementSibling
element.previousElementSiblingWięcej przykładów
#const tasks = document.querySelector('#tasks')
console.log(tasks.children.length)
console.log(tasks.childNodes.length)
console.log(tasks.firstChild.nodeName)
console.log(tasks.firstElementChild.nodeName)childNodes liczy też trzy węzły tekstowe ze znakami nowej linii i wcięciami między znacznikami. firstChild wskazuje pierwszy z nich, a firstElementChild pierwszy element <li>.
const ranking = document.querySelector('#ranking')
const items = ranking.children
const newPlayer = document.createElement('li')
newPlayer.textContent = 'Ola'
ranking.append(newPlayer)
console.log(items.length)
console.log([...items].map((li) => li.textContent))
console.log(typeof items.map)Zmienna items została pobrana przed dodaniem Oli, a mimo to widzi trzy elementy. Metody map() kolekcja nie ma, dlatego najpierw zamieniamy ją na tablicę.
const tabs = document.querySelector('#tabs')
function move(step) {
const active = tabs.querySelector('.active')
const next =
step > 0
? active.nextElementSibling ?? tabs.firstElementChild
: active.previousElementSibling ?? tabs.lastElementChild
active.classList.remove('active')
next.classList.add('active')
console.log('Aktywna zakładka:', next.textContent)
}
move(1)
move(1)
move(-1)Za ostatnią zakładką nextElementSibling zwraca null, więc operator ?? przenosi zaznaczenie na początek. W drugą stronę działa to tak samo.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wybieraj właściwości ze słowem „Element” (
firstElementChild,nextElementSibling). Wersje bez niego (firstChild,nextSibling) często zwracają węzeł tekstowy ze spacjami. - Usuwając dzieci w pętli po
children, najpierw zrób kopię:[...list.children]. Kolekcja jest żywa i po każdym usunięciu przesuwają się indeksy, więc część elementów zostałaby pominięta. - Do szukania przodka pasującego do selektora wygodniejsze jest
closest()niż kilkukrotneparentElement.
Powiązane hasła
#- Element.closest()Zwraca najbliższego przodka (lub sam element) pasującego do selektora CSS albo null.
- document.querySelectorAll()Zwraca statyczną listę (NodeList) wszystkich elementów pasujących do selektora CSS.
- Element.append()Dodaje elementy lub tekst na końcu zawartości elementu.
- Element.remove()Usuwa element z dokumentu razem z całą jego zawartością.
- Array.from()Tworzy tablicę z obiektu iterowalnego lub „tablicopodobnego”.
Widzisz błąd albo brakuje przykładu? Napisz do nas.