På denna sida beskrivs hur man kan väljer ut element från DOM-struktur med metoderna .all() och .one().

Sidans innehåll

Inledning

I YUI används (främst?) det två metoderna .all() och .one(), till vilken man skickar selektorer som en sträng som argument.

Exempel

I exempel nedan så väljs elementet med ID "error", för att sen ange elementets innehåll som HTML. Sen ändras stil för element i den filtrerade listan ändras sen till röd (text-)färg.

Y.one("#error").setHTML("FEL: Försök igen!").setStyle("color", "blue");

I.o.m. version 3 av YUI så ändrades strukturen av YUI-ramverket, så om du programmerat med tidigare version eller hittar exempel som ser helt annorlunda ut än mina, så kan det bero på att dessa exempel är för tidigare version av YUI.

Många metoder returnerar det objekt som metod anropas på, vilket innebär att metoder kan "länkas" (s.k. chaining) - en metod kan anropas direkt efter en annan.

Strukturerande av kod

JavaScript:s syntax är mycket "anpassningsbar", vilket gör att vi kan skriva koden mer läsbar. Bl.a. så kan man infoga radbrytningar och indrag där man i andra språk inte får dela på koden.

Det är dock praktiskt att alltid använda semikolon för att avsluta satser så att koden är lättare att tolka, men även så att den fungerar korrekt om man komprimerar koden.

Exempel

Här har koden från föregående exempel skrivits om mer läsbar (?).

Y.all("li.red")
  .setHTML("FEL: Försök igen!")
  .setStyle("color", "blue");

Till början på sida

Metoderna .all() och .one()

Till metoder nedan skickas selektorsträng.

Filtreringsmetoder
Metod Element som filtreras ut
.all(selektor) Instans av klassen NodeList som innehåller element som matchar selektor
.one(selektor) Instans av klassen Node som innehåller element som matchar selektor
Exempel

I exempel nedan så väljs först alla punkter i listor och sen filtreras element nummer 3 ut (då vektorer i JavaScript är 0-baserade).

Y.all("li:nth-child(2)"); //Listelement 2

if(Y.all(".rubrik").test("h1")) ...; //Om element är H1

Till början på sida

Referenser

Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.