Att Arbeta med Elementattribut i DOM:en

Attribut är värden som läggs till HTML-element för att ge ytterligare information eller ändra deras beteende. JavaScript tillhandahåller flera metoder för att arbeta med dessa attribut, vilket gör det möjligt att dynamiskt hämta, sätta, ta bort eller kontrollera specifika attribut.

GetAttribute()

getAttribute() används för att hämta värdet av ett angivet attribut från ett element. Det är användbart när du behöver komma åt specifika attributvärden som href, src, class osv.

index.html

index.js

Hämtar värdet av attributet href för ankarelementet (<a>).

SetAttribute()

setAttribute() används för att lägga till ett nytt attribut eller ändra värdet på ett befintligt attribut på ett element.

index.html

index.js

Ställer in eller uppdaterar attributet alt för bilden, vilket möjliggör dynamiska ändringar baserat på användaråtgärder eller applikationslogik.

RemoveAttribute()

removeAttribute() tar bort ett angivet attribut från ett element, vilket är användbart för att villkorligt växla attribut baserat på vissa händelser eller tillstånd.

index.html

index.js

Tar bort attributet disabled, vilket möjliggör interaktion med knappen.

HasAttribute()

hasAttribute() kontrollerar om ett element har ett angivet attribut. Denna metod är särskilt användbar för villkorslogik och säkerställer att vissa attribut finns innan ytterligare åtgärder utförs.

index.html

index.js

Kontrollerar om attributet required finns på inmatningsfältet och loggar ett meddelande därefter.

Skillnader mellan egenskaper och attribut

Även om egenskaper och attribut ofta används omväxlande, fyller de olika roller i DOM:en. Låt oss undersöka deras skillnader.

index.html

index.js

Attributet value behåller det ursprungliga värdet som definierats i HTML;
Egenskapen value återspeglar det aktuella, dynamiskt uppdaterade tillståndet för inmatningen.

Praktiskt exempel: Hantering av produktinformation på en e-handelssida

Föreställ dig en produktinformationssektion där användare kan uppdatera produktuppgifter såsom tillgänglighet, utvald status och leveransalternativ. Detta exempel visar hur attribut används för att dynamiskt styra dessa aspekter.

index.html

index.css

index.js

setAttribute()-metoden används för att dynamiskt lägga till specifika attribut till element baserat på användarens handlingar. Till exempel, när tillgänglighetsstatusen växlas till "Out of Stock", lägger setAttribute() till en out-of-stock-klass för att tillämpa unik formatering. På samma sätt lägger den till ett data-featured-attribut på kryssrutan för utvald när produkten markeras som utvald.

Metoden removeAttribute() tar bort dessa attribut när de inte längre behövs. Exempelvis tas out-of-stock-klassen bort när statusen växlas tillbaka till "In Stock" och data-featured-attributet tas bort om produkten inte längre är markerad som utvald. Dessutom används removeAttribute() för att växla synligheten för leveransinformationen genom att lägga till eller ta bort attributet hidden.

Slutligen kontrollerar hasAttribute() förekomsten av dessa attribut, såsom att verifiera om data-featured-attributet finns innan den utvalda statusen uppdateras eller kontrollera hidden-attributet på leveransinformationen för att avgöra dess synlighetsstatus.

1. Vilken metod används för att hämta värdet av ett attribut från ett element?

2. Vad gör metoden `setAttribute()`?

3. Vad kommer följande kod att skriva ut?

Vilken metod används för att hämta värdet av ett attribut från ett element?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

Vad gör metoden setAttribute()?

Select the correct answer

Lägger till ett nytt attribut eller uppdaterar värdet på ett befintligt attribut.

Tar bort ett attribut från ett element.

Kontrollerar om ett attribut finns på ett element.

Hämtar värdet av ett attribut.

Vad kommer följande kod att skriva ut?

Select the correct answer

true

false

null

Ett fel

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 7

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you explain the main differences between attributes and properties in more detail?

How do I use these attribute methods in a real JavaScript example?

What are some common mistakes when working with attributes and properties?

Awesome!

Completion rate improved to 2.22

Att Arbeta med Elementattribut i DOM:en

Svep för att visa menyn

GetAttribute()

getAttribute() används för att hämta värdet av ett angivet attribut från ett element. Det är användbart när du behöver komma åt specifika attributvärden som href, src, class osv.

index.html

index.js

Hämtar värdet av attributet href för ankarelementet (<a>).

SetAttribute()

setAttribute() används för att lägga till ett nytt attribut eller ändra värdet på ett befintligt attribut på ett element.

index.html

index.js

Ställer in eller uppdaterar attributet alt för bilden, vilket möjliggör dynamiska ändringar baserat på användaråtgärder eller applikationslogik.

RemoveAttribute()

removeAttribute() tar bort ett angivet attribut från ett element, vilket är användbart för att villkorligt växla attribut baserat på vissa händelser eller tillstånd.

index.html

index.js

Tar bort attributet disabled, vilket möjliggör interaktion med knappen.

HasAttribute()

index.html

index.js

Kontrollerar om attributet required finns på inmatningsfältet och loggar ett meddelande därefter.

Skillnader mellan egenskaper och attribut

Även om egenskaper och attribut ofta används omväxlande, fyller de olika roller i DOM:en. Låt oss undersöka deras skillnader.

index.html

index.js

Attributet value behåller det ursprungliga värdet som definierats i HTML;
Egenskapen value återspeglar det aktuella, dynamiskt uppdaterade tillståndet för inmatningen.

Praktiskt exempel: Hantering av produktinformation på en e-handelssida

index.html

index.css

index.js

1. Vilken metod används för att hämta värdet av ett attribut från ett element?

2. Vad gör metoden `setAttribute()`?

3. Vad kommer följande kod att skriva ut?

Vilken metod används för att hämta värdet av ett attribut från ett element?

Select the correct answer

getAttribute()

setAttribute()

removeAttribute()

hasAttribute()

Vad gör metoden setAttribute()?

Select the correct answer

Lägger till ett nytt attribut eller uppdaterar värdet på ett befintligt attribut.

Tar bort ett attribut från ett element.

Kontrollerar om ett attribut finns på ett element.

Hämtar värdet av ett attribut.

Vad kommer följande kod att skriva ut?

Select the correct answer

true

false

null

Ett fel

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 7

Att Arbeta med Elementattribut i DOM:en

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Skillnader mellan egenskaper och attribut

Praktiskt exempel: Hantering av produktinformation på en e-handelssida

1. Vilken metod används för att hämta värdet av ett attribut från ett element?

2. Vad gör metoden setAttribute()?

3. Vad kommer följande kod att skriva ut?

Awesome!

Att Arbeta med Elementattribut i DOM:en

GetAttribute()

SetAttribute()

RemoveAttribute()

HasAttribute()

Skillnader mellan egenskaper och attribut

Praktiskt exempel: Hantering av produktinformation på en e-handelssida

1. Vilken metod används för att hämta värdet av ett attribut från ett element?

2. Vad gör metoden setAttribute()?

3. Vad kommer följande kod att skriva ut?

2. Vad gör metoden `setAttribute()`?

2. Vad gör metoden `setAttribute()`?