JQuery - DOM och element: Skillnad mellan sidversioner

Nuvarande version från 10 februari 2019 kl. 11.30

En av huvuduppgifterna för jQuery är att tillhandahålla metoder med vilka vi enkelt kan manipulera element. Därför finns många funktioner för att söka ut element ifrån DOM , för att förflytta sig mellan element i DOM-trädet och liknande. Det finns även många metoder för att läsa, skriva och förändra innehållet i element.

Att söka i DOM

Vi ska börja med att titta på hur man kan söka fram och välja ut specifika element ifrån DOM med hjälp av jQuery. I ett tidigare exempel visade vi hur man kan kalla på jQuery som en metod och därmed göra en sökning i DOM. Genom att använda anrop i formen av $(selektor) kan man enkelt välja ut ett eller flera element ifrån DOM. Genom att ange en selektor på samma vis som du anger en selektor i CSS kan du alltså enkelt komma åt just de sektioner av DOM som du är ute efter.

Grundläggande sökningar i DOM

Precis som i CSS, så finns det ett antal sätt på vilket man kan välja ut information ur DOM. Grunderna är som följer:

Söka på element-namn

Om du inte sätter något specialtecken först i din selektor, kommer jQuery att leta efter HTML-element av den typ som din selektorsträng anger.

See the Pen GoNWro by Patrik Grip-Jansson (@PGJ) on CodePen.

Söka på klassnamn

Om du sätter en "." före en sträng i din selektor, kommer jQuery att leta efter de HTML-element som har den klass du angett.

See the Pen vLyxxE by Patrik Grip-Jansson (@PGJ) on CodePen.

Söka på ID-namn

Om du sätter ett "#" före en sträng i din selektor, kommer jQuery att lefta efter det HTML-element som har den ID som du angivit.

See the Pen gPLmmr by Patrik Grip-Jansson (@PGJ) on CodePen.

Mer komplexa exempel

Självklart kan du, precis som i CSS, kombinera samman flera olika selektorer. Titta på sektionerna om CSS för mer information om olika typer av selektorer som går att använda (t.ex. kan du börja med "Introduktion till id och klasser").

Låt oss söka ut element som tillhör en av två olika klasser. Detta kan vi göra med en selektor som använder , för att separera de olika selektorerna.

See the Pen MKbpmG by Patrik Grip-Jansson (@PGJ) on CodePen.

Om vi vill komma åt det första elementet av typen "p" kan vi göra så här:

See the Pen bEBqrW by Patrik Grip-Jansson (@PGJ) on CodePen.

Som du ser fungerar även mer "avancerade" selektorer alldeles utmärkt med jQuery.

Nästa aktivitet

jQuery - innehåll i element

@@ Rad 1: / Rad 1: @@
-En av huvuduppgifterna för [[jQuery]] är att tillhandahålla metoder med vilka vi enkelt kan manipulera [[DOM]]. Därför finns många funktioner för att söka i [[DOM ]] och för att förflytta sig i [[DOM]]-trädet. Det finns även många metoder för att läsa, skriva och förändra innehållet i [[DOM]]. I ett tidigare exempel visade vi hur man kan kalla på [[jQuery]] som en metod och därmed göra en sökning i [[DOM]]. Genom att använda <code>$(''selektor'')</code> kan man enkelt välja ut ett eller flera element i [[DOM]]. Genom att ange en selektor på samma vis som du anger en selektor i CSS kan du enkelt komma åt just de sektioner av [[DOM]] som du är ute efter.
+En av huvuduppgifterna för [[jQuery]] är att tillhandahålla metoder med vilka vi enkelt kan manipulera element. Därför finns många funktioner för att söka ut element ifrån [[DOM ]], för att förflytta sig mellan element i [[DOM]]-trädet och liknande. Det finns även många metoder för att läsa, skriva och förändra innehållet i element.
-<div class="well well-warning">
+== Att söka i [[DOM]] ==
-OBS: att ändra i [[DOM]] kan vara kostsamt och göra din webbapplikation långsammare. Försök därför att minimera hur mycket förändringar du gör. Alla förändringar som innebär att hela sidan måste ritas om är de mest kostsamma. Man kan självklart inte göra en webbapplikation utan att på något vis manipulera [[DOM]], så bli inte helt och hållet avskräckt ifrån att göra det. Försök bara att minimera vad du ändrar och hur ofta du gör det.
+Vi ska börja med att titta på hur man kan  söka fram och välja ut specifika element ifrån [[DOM]] med hjälp av jQuery. I ett tidigare exempel visade vi hur man kan kalla på [[jQuery]] som en metod och därmed göra en sökning i [[DOM]]. Genom att använda anrop i formen av <code>$(''selektor'')</code> kan man enkelt välja ut ett eller flera element ifrån [[DOM]]. Genom att ange en selektor på samma vis som du anger en selektor i CSS kan du alltså enkelt komma åt just de sektioner av [[DOM]] som du är ute efter.
-</div>
+== Grundläggande sökningar i DOM ==
 Precis som i CSS, så finns det ett antal sätt på vilket man kan välja ut information ur [[DOM]]. Grunderna är som följer:
-* Om du inte sätter något specialtecken först i din selektor, kommer [[jQuery]] att leta efter HTML-element av den typ som din selektorsträng anger.
-* Om du sätter en ”.” före en sträng i din selektor, kommer [[jQuery]] att leta efter de HTML-element som har den klass du angett.
-* Om du sätter ett ”#” före en sträng i din selektor, kommer [[jQuery]] att lefta efter det HTML-element som har den ID som du angivit.
-Självklart kan du, precis som i CSS, kombinera samman flera olika selektorer. Titta på sektionerna om CSS för mer information om olika typer av selektorer som går att använda (t.ex. kan du börja med "[[Introduktion till id och klasser]]"). Det finns en uppsjö av selektorer, men alla är inte användbara och vi täcker därför inte alla som finns.
+=== Söka på element-namn ===
+Om du inte sätter något specialtecken först i din selektor, kommer [[jQuery]] att leta efter HTML-element av den typ som din selektorsträng anger.
+<codepen pen="GoNWro" tab="js,result" height="250">
+</codepen>
-== Att komma åt innehåll ==
+=== Söka på klassnamn ===
-<div class="well well-meadow">
+Om du sätter en "<code>.</code>" före en sträng i din selektor, kommer [[jQuery]] att leta efter de HTML-element som har den klass du angett.
-I alla efterföljande jQuery-exempel, kommer vi att separera HTML, CSS och JavaScript i varsin Codepen-flik och minimera den kod som skulle behövts för att skapa en komplett sida. Detta främst för att kunna urskilja och visa det som är viktigt för exemplet ifråga.
+<codepen pen="vLyxxE" tab="js,result" height="250">
-</div>
+</codepen>
-I grunden finns det två sätt på vilket man kan få tillgång till innehållet i en DOM-nod. Dels kan vi komma åt den rena text som eventuellt står där, dels kan vi komma åt den HTML-kod som finns i noden. Vi kan både läsa ut innehållet eller ändra innehållet i noden.
+=== Söka på ID-namn ===
-<div class="well well-warning">
+Om du sätter ett "<code>#</code>" före en sträng i din selektor, kommer [[jQuery]] att lefta efter det HTML-element som har den ID som du angivit.
-OBS man kan inte läsa ut innehållet på formulärelement med dessa två kommandon. Vill du ha innehållet ifrån t.ex. ett textfält läser du ut det med metoden ”val()” istället.
+<codepen pen="gPLmmr" tab="js,result" height="250">
-</div>
+</codepen>
-I jQuery finns två huvudsakliga metoder för att manipulera DOM-noders innehåll. Dessa är; <code>.text()</code> och <code>.html()</code>. Vi kommer nu att gå igenom hur dessa två metoder fungerar.
+== Mer komplexa exempel ==
+Självklart kan du, precis som i CSS, kombinera samman flera olika selektorer. Titta på sektionerna om CSS för mer information om olika typer av selektorer som går att använda (t.ex. kan du börja med "[[Introduktion till id och klasser]]").
-== <code>.text()</code>==
+Låt oss söka ut element som tillhör en av två olika klasser. Detta kan vi göra med en selektor som använder <code>,</code> för att separera de olika selektorerna.
-Om du vill ha den rena texten som finns inuti ett element, kan du använda dig av metoden <code>.text()</code>. Här följer ett kort exempel:
+<codepen pen="MKbpmG" tab="js,result" height="250">
-<codepen pen="EPNjax" tab="javascript" height="100">
 </codepen>
-I exemplet skapar vi en enkel HTML-struktur, där topphalvan är till för att vi ska ha något att experimentera med och bottenhalvan, den gulfärgade ytan, är till för att visa upp resultatet ifrån vårt JavaScript. Tryck på fliken "Result" för att se hur slutresultatet.
+Om vi vill komma åt det första elementet av typen "<code>p</code>" kan vi göra så här:
+<codepen pen="bEBqrW" tab="js,result" height="250">
+</codepen>
-På rad ett i JavaScript-koden läser vi ut innehållet som finns i HTML-elementet som har klassen <code>.a</code>.  Detta görs med metoden <code>text()</code>. När man kallar på denna utan parametrar, så kommer jQuery att läsa ut innehållet ur motsvarande DOM-nod.
+Som du ser fungerar även mer "avancerade" selektorer alldeles utmärkt med [[jQuery]].
-På rad två väljer vi ut det <code>p</code>-element som ligger i ett element som har ID satt till <code>resultat</code>. Nu använder vi oss av en parameter i <code>text</code>-metoden. När vi gör detta kommer eventuellt textinnehåll i den utvalda noden att ersättas med parameterinnehållet.
+== Nästa aktivitet ==
+[[jQuery - innehåll i element]]
-I nästa exempel ska vi se vad som händer om vi tar ut text ifrån en nod som har flera underelement.
-<codepen pen="GoNJoM" tab="javascript" height="100">
-</codepen>
-I detta fall väljer vi ut den div som innehåller ett antal p-element. Som resultat får vi allt textinnehåll som finns i de olika p-elementen. Med andra ord så läser ”text()” ut texten ur elementet och alla dess underelement. Det kan alltså vara bra att vara mycket specifik i vilket element man väljer ut, om man inte vill råka få med massa extratext.
+[[Category: jQuery|J4]]
-Vi provar en annan variant. Den här gången väljer vi ut alla p-element.
+[[Category: JavaScript|J4]]
-gPLpro
-Vi får då tillbaka en sträng som innehåller texten ifrån alla p-element. Lägg märke till att vi även får texten som finns från början i resultat, dvs ”Detta skrivs över”. Vi läser ju ut innehållet innan vi skriver över denna.
-Vad händer då om vi väljer ut alla p-element och använder ”.text('skriv över');”?
-VemLjp
-Som förväntat så ersätts innehållet i varje p-element med den text vi skickade in. jQuery loopar alltså igenom alla p-element som matchas och kör den angivna metoden på varje element.
-Nu ska vi prova att ersätta textinnehållet på ett element som har flera underelement.
-RroPGZ
-Som du ser så skrevs alla underelement över med den angivna texten och de försvann därmed ifrån vår DOM.
-.html()
-Om man vill ha med den rena HTML-kod som byggt upp utvald nod, använder man sig av ”.html()”. Ett exempel på detta:
-jWVPVd
-Vi läser alltså ut innehållet med ”.html()” och visar det med ”.text(a)”. Här ser vi att vi får den rena HTML-koden som motsvarar allt innehåll i vår div. Dock får vi inte med HTML-koden som skapade själva elementet vi valde ut, vi får enbart innehållet i det! Lägg märke till att vi även får med de attribut som är satta för varje element.
-Om vi istället skulle visa det utlästa innehållet med ”.html(a)” skulle resultatet bli följande:
-zroGZG
-Webbläsaren omvandlade alltså strängen med HTML-kod till nytt innehåll och skapade nya element utifrån detta.
-Att göra dylika ändringar kan innebära att sidan måste ritas om ifrån grunden, vilket kan vara tungt för webbläsaren. Så gör inte detta i onödan. Försök att göra alla ändringar i en stor samtidig ändring, istället för många att göra många små. Då behövs bara sidan ritas om en gång. Förstås så gör du detta enbart när det är absolut nödvändig. Optimering är en hel vetenskap och speciellt krångligt blir det när man börjar involvera olika webbläsare, som kanske är olika bra på olika saker. Rent generellt är det bäst att skriva klart sin applikation, så allt fungerar och sedan efter det börja optimera.