DOM-navigatie-eigenschappen zijn geweldig wanneer elementen dicht bij elkaar staan. Wat als ze dat niet zijn? Hoe krijg ik een willekeurig element van de pagina?
Daar zijn extra zoekmethoden voor.
document.getElementById of gewoon id
Als een element de id attribuut, kunnen we het element ophalen met de methode document.getElementById(id), ongeacht waar het is.
Bijvoorbeeld :
Er is ook een globale variabele met de naam id die verwijst naar het element:
… Tenzij we een JavaScript-variabele declareren met de dezelfde naam, dan heeft deze voorrang:
Dit gedrag wordt beschreven in de specificatie, dus het is een soort standaard. Maar het wordt voornamelijk ondersteund voor compatibiliteit.
De browser probeert ons te helpen door de naamruimten van JS en DOM te combineren. Dat is prima voor eenvoudige scripts, geïntegreerd in HTML, maar is over het algemeen geen goede zaak. Er kunnen naamconflicten zijn. Als iemand JS-code leest en geen HTML in beeld heeft, is het niet duidelijk waar de variabele vandaan komt.
Hier in de tutorial gebruiken we id om direct te verwijzen naar een element voor beknoptheid, als het duidelijk is waar het element vandaan komt.
In het echte leven is document.getElementById de geprefereerde methode.
id moet uniek zijn De id moet uniek zijn. Er kan slechts één element in het document zijn met de opgegeven id.
Als er meerdere elementen zijn met dezelfde id, dan is het gedrag van methoden die het gebruiken onvoorspelbaar, bijv document.getElementById kan elk van dergelijke elementen willekeurig retourneren. Houd u dus aan de regel en houd id uniek.
document.getElementById, niet anyElem.getElementById De methode getElementById kan alleen worden aangeroepen op document object. Het zoekt naar het gegeven id in het hele document.
querySelectorAll
Verreweg de meeste veelzijdige methode, elem.querySelectorAll(css) retourneert alle elementen binnen elem die overeenkomen met de gegeven CSS-selector.
Hier zoeken we naar alle <li> elementen die laatste kinderen zijn:
Deze methode is inderdaad krachtig, omdat elke CSS-selector kan worden gebruikt.
Pseudo-klassen in de CSS-selector zoals :hover en :active zijn ook ondersteund. document.querySelectorAll(":hover") retourneert bijvoorbeeld de verzameling met elementen waar de aanwijzer nu op staat (in nestvolgorde: van de buitenste <html> tot de meest geneste).
querySelector
De aanroep van elem.querySelector(css) retourneert het eerste element voor de opgegeven CSS selector.
Met andere woorden, het resultaat is hetzelfde als elem.querySelectorAll(css), maar de laatste zoekt naar alle elementen en kiest er een uit, terwijl elem.querySelector zoekt er maar een. Het is dus sneller en ook korter om te schrijven.
overeenkomsten
Eerdere methoden waren het doorzoeken van de DOM.
De elem.matches (css) zoekt nergens naar , het controleert alleen of elem overeenkomt met de opgegeven CSS-selector. Het retourneert true of false.
De methode is handig wanneer we elementen herhalen (zoals in een array of zoiets) en proberen die te filteren die ons interesseren.
Bijvoorbeeld:
dichtstbijzijnde
Voorouders van een element zijn: ouder, de ouder van ouder, zijn ouder enzovoort. De voorouders vormen samen de keten van ouders van het element tot de top.
De methode elem.closest(css) zoekt naar de dichtstbijzijnde voorouder die overeenkomt met de CSS-selector. De elem zelf wordt ook meegenomen in de zoekopdracht.
Met andere woorden, de methode closest gaat omhoog van de element en controleert elk van de ouders. Als het overeenkomt met de selector, stopt het zoeken en wordt de voorouder geretourneerd.
Bijvoorbeeld:
getElementsBy *
Er zijn ook andere methoden om te zoeken voor knooppunten door een tag, klasse, enz.
Tegenwoordig zijn ze meestal geschiedenis, aangezien querySelector krachtiger en korter is om te schrijven.
Dus hier behandelen we ze voornamelijk voor de volledigheid, terwijl je ze nog kunt vinden in de oude scripts.
-
elem.getElementsByTagName(tag)zoekt naar elementen met de gegeven tag en retourneert de verzameling ervan. De parametertagkan ook een ster"*"zijn voor “alle tags”. -
elem.getElementsByClassName(className)retourneert elementen met de opgegeven CSS-klasse. -
document.getElementsByName(name)retourneert elementen met het gegevennameattribuut, documentbreed. Zeer zelden gebruikt.
Bijvoorbeeld:
Laten we alle input tags in de tabel zoeken:
"s" letter! Beginnende ontwikkelaars vergeten soms de letter "s". Dat wil zeggen, ze proberen getElementByTagName aan te roepen in plaats van getElementsByTagName.
De "s" letter is afwezig in getElementById, omdat het een enkel element retourneert. Maar getElementsByTagName retourneert een verzameling elementen, dus er zit "s" in.
Een andere wijdverbreide beginnersfout is het schrijven:
Dat zal niet werken, omdat het een verzameling invoer nodig heeft en de waarde eraan toewijst in plaats van aan elementen erin.
We moeten de verzameling herhalen of een element ophalen via de index, en vervolgens als volgt toewijzen:
Op zoek naar .article elementen:
Live collecties
Alle methoden "getElementsBy*" retourneren een live collectie. Dergelijke verzamelingen weerspiegelen altijd de huidige status van het document en worden automatisch bijgewerkt wanneer het verandert.
In het onderstaande voorbeeld zijn er twee scripts.
- De eerste maakt een verwijzing naar de verzameling
<div>. Vanaf nu is de lengte1. - De tweede scripts wordt uitgevoerd nadat de browser nog een
<div>ontmoet, dus de lengte is2.
In tegenstelling , querySelectorAll retourneert een statische verzameling. Het is als een vaste reeks elementen.
Als we het in plaats daarvan gebruiken, voeren beide scripts 1:
Nu kunnen we gemakkelijk het verschil zien De statische verzameling nam niet toe na het verschijnen van een nieuwe div in het document.
Samenvatting
Er zijn 6 hoofdmethoden om naar knooppunten in DOM te zoeken:
| Methode | Zoekt op … | Kan bellen l op een element? | Live? |
querySelector |
CSS-kiezer | ✔ | – |
querySelectorAll |
CSS-selector | ✔ | – |
getElementById |
id |
– | – |
getElementsByName |
name |
– | ✔ |
getElementsByTagName |
tag of "*" |
✔ | ✔ |
getElementsByClassName |
class | ✔ | ✔ |
Veruit de meest gebruikte zijn querySelector en querySelectorAll, maar getElement(s)By* kan sporadisch nuttig zijn of in de oude scripts worden gevonden.
Daarnaast:
- Er is
elem.matches(css)om te controleren ofelemovereenkomt met de gegeven CSS-selector. - Er is
elem.closest(css)om te zoeken naar de dichtstbijzijnde voorouder die overeenkomt de gegeven CSS-selector. Deelemzelf wordt ook gecontroleerd.
En laten we hier nog een methode noemen om te controleren op de kind-ouderrelatie, aangezien deze soms handig is:
-
elemA.contains(elemB)geeft true terug alselemBbinnenelemA(een afstammeling vanelemA) of wanneerelemA==elemB.