På denna sida beskrivs hur man manipulerar element i DOM-struktur, t.ex. lägger till nya element och ändrar stil (CSS) för element.
När vi valt ut element så är det dags att manipulera elementen, t.ex. genom att ändra stil (CSS) för element, dölja/visa element eller rent av lägga till nya/ta bort existerande element. Metoder för detta finns bl.a. i klasserna Node och NodeList.
Till början på sida
I detta avsnitt beskrivs metoder för att ändra stil för element, antingen genom att lägga till eller ta bort stil, men även klass för element.
Sammansatta namn på stilar skrivs med kamelpuckelnotation (eng. camel case), t.ex. "font-weight" skrivs "fontWeight".
Metod | Beskrivning |
---|---|
.addClass(klass) | Lägger till klass till alla element |
.getComputedStyle(egenskap) | Hämtar beräknad (faktisk) egenskap i elementets stil, d.v.s egna och ärvda |
.getStyle(egenskap) | Hämtar egenskap i elementets stil |
.hasClass(klass) | true om element är av klass i argumentet klass |
.removeClass(klass) | Tar bort klass från elementet |
.replaceClass(existerandeKlass, nyKlass) | Ersätter existerandeKlass med nyKlass. Om existerandeKlass inte finns, så läggs nyKlass till |
.setStyle(egenskap, varde) | Sätter egenskap till varde i elementets stil |
.setStyles(vardelista) | Sätter egenskaper vardelista i elementets stil |
.toggleClass(klass, tvinga) | Om element har klass tas den bort, annars läggs klass till |
Till början på sida
I detta avsnitt beskrivs metoder för att hämta eller sätta höjd och bredd för element, värden som avser storlek innan- och utanför kantlinjer, men även positionering av element. Metoderna finns i både klassen Node och NodeList, och skillnaden mellan dem är att de gäller en eller flera element.
Metod | Beskrivning |
---|---|
.getX() | Hämtar elementets position i horisontellt led |
.getX() | Hämtar elementets position i horisontellt och vertikalt led som vektor |
.getY() | Hämtar elementets position i vertikalt led |
.setX(x) | Sätter elementets position i horisontellt led till x |
.setXY({x,y}) | Sätter elementets position i horisontellt och vertikalt led till x resp. y |
.setY(y) | Sätter elementets position i vertikalt led till y |
Klassen Node innehåller även en del egenskaper som har med dokument och fönstret som dokument visas i. (Dessa egenskaper finns alltså inte i klassen NodeList.)
Egenskap | Beskrivning |
---|---|
.docHeight | Höjd på dokumentet |
.docScrollX | Antal pixlar som dokument skrollats horisontellt |
.docScrollY | Antal pixlar som dokument skrollats vertikalt |
.docWidth | Bredd på dokument |
.winHeight | Höjd på synlig del av dokument, exklusive rullningslister |
.winWidth | Bredd på synlig del av dokument, exklusive rullningslister |
Till början på sida
I detta avsnitt beskrivs metoder för att manipulera element i DOM-struktur. Element kan infogas före och efter ett annat element.
Metoder i detta avsnitt tillåter infogande inuti ett element, antingen först (eng. prepend), sist (eng. append) eller infogande/ersättande av hela innehållet.
Metod | Beskrivning |
---|---|
.append(arg) | Lägger till argumentet arg till slutet på elements innehåll |
.appendChild(arg) | Lägger till argumentet arg till slutet på elements innehåll och returnerar det tillagda elementet |
.appendTo(mal) | Lägger till element till slutet på argumentet mal |
.prepend(arg) | Lägger till argumentet arg till början på elements innehåll |
.setHTML(arg) | Sätter argumentet arg som elementets innehåll |
.insert(innehall, var) | Infogar innehall på position angiven i var - var kan vara ett index, ett element, en nod eller sträng som anger relativ postion ("replace", "before" eller "after") |
Metoder i detta avsnitt tillåter kopiering och borttagande av element, men även elements attribut. Metoderna i tabell nedan kan användas för att manipulera element.
Metod | Beskrivning |
---|---|
.cloneNode(barn) | Skapar och returnerar kopia på element och, om barn är sant, alla ättlingar |
.destroy([rekursivt]) | Tar bort alla barnelement och, om rektursivt sant, alla ättlingar och dess relaterade objekt |
.empty() | Tar bort alla barnelement och alla ättlingar och dess relaterade objekt |
.remove(destroy) | Tar bort aktuellt element från förälder och, om destroy sant, anropa metoder .destroy() på elementet |
.removeChild(arg) | Tar bort barnelement i arg. Returnerar borttaget element. |
.replace(nyttElement) | Ersätter aktuellt element med det i nyttElement |
.replaceChild(nyttElement, existerandeElement) | Ersätter barnelementet existerandeElement med nyttElement |
.setHTML(arg) | Ersätter elementets innehåll med det i arg |
.unwrap() | Tar bort elementets förälder |
.wrap(html) | Lägg till HTML i html runt elementet |
Det finns ett antal metoder för att manipulera attribut i element, men även för att manipulera egenskaper (eng. properties) som t.ex. kan användas i egen kod.
Metod | Beskrivning |
---|---|
.removeAttribute(namn) | Tar bort attributet som matchar argumentet namn |
.set(namn, varde) | Sätter attributet namn till värdet varde. Endast giltiga attribut sätts. |
.setAttribute(namn, varde) | Sätter attributet namn till värdet varde. Även anpassade attribut sätts. |
.setAttrs(vektor) | Sätter alla attribut i vektor |
Till början på sida
Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.