Deze zelfstudie beschrijft de procedure voor het vinden van het DOM-element op basis van een attribuutwaarde.
Hoe een element in DOM te vinden/op te halen op basis van een attribuutwaarde?
Om het element in DOM te vinden op basis van een kenmerkwaarde, gebruikt u de ' vraagSelector() ” methode. Het geeft het eerste gevonden element in het document dat overeenkomt met de gegeven CSS-selectorwaarde.
Opmerking : Gebruik de ' querySelectorAll() ” methode.
Syntaxis
Gebruik de volgende syntaxis om de methode 'querySelector()' te gebruiken:
document. querySelector ( kiezer ) ;
Hier is de selector een id of klasse als ' #ID kaart ”, “ .klas ”:
U kunt ook de gegeven syntaxis gebruiken om het element te vinden op basis van de attribuutwaarde:
document. querySelector ( '[selector='waarde']' ) ;
In de bovenstaande syntaxis, ' kiezer ' zal zijn ' ID kaart ' of ' klas ', of de ' waarde ' zal zijn ' idNaam ' of ' naam van de klasse ”.
Voorbeeld
Maak in een HTML-bestand een div-element dat een kop bevat met behulp van het h4-element, een platte tekst met behulp van de -tag en een div voor een bericht met toegewezen id ' bericht ”:
< div. id = 'div' stijl = 'tekst uitlijnen: centreren;' >< h4 klas = 'sec' ID kaart = 'kop' > Zoek een Element in DOM Gebaseerd op een Attribuut Waarde h4 >
< span id = 'welkom' > Welkom bij Linuxhint span >
< div. id = 'bericht' >
< p id = 'bericht' > Hallo jongens ! Welkom bij de Linuxhint JavaScript Tutorials P >
div >
div >
De pagina zal er als volgt uitzien:
Nu krijgen we het element waar de id ' bericht ” wordt toegewezen met behulp van de “ vraagSelector() ” methode:
elk element = document. querySelector ( '#bericht' )Druk ten slotte het element op de console af:
troosten. loggen ( element ) ;In de uitvoer wordt de ' div ” element wordt getoond met zijn toegewezen id “ bericht ”, wat aangeeft dat het vereiste element met succes is opgehaald:
U kunt het element ook ophalen met behulp van de gegeven syntaxis. Hier krijgen we het element waarvan de id is ' bericht ”:
elk onderdeel = document. querySelector ( '[id='bericht']' ) ;Uitgang
Werk nu de kleur ervan bij met behulp van de ' stijl ' eigendom:
element. stijl . kleur = 'blauw' ;Zoals je kunt zien, stond de tekst in ' groente ' kleur, en nu is het bijgewerkt naar ' blauw ”:
Dat gaat allemaal over het vinden van een element in een DOM op basis van een attribuutwaarde.
Conclusie
Gebruik voor het vinden van een element in DOM op basis van een attribuutwaarde de vraagSelector() ” methode die het eerste element in het document geeft dat overeenkomt met de opgegeven CSS-selectorwaarde. Gebruik bovendien de ' querySelectorAll() ” methode. In deze zelfstudie wordt de procedure beschreven voor het vinden van het DOM-element op basis van een attribuutwaarde.