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.

Sidans innehåll

Inledning

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

CSS

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".

CSS-metoder
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

Storlek (höjd och bredd)

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.

Storleksmetoder
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.)

Storleksegenskaper
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

Manipulation

I detta avsnitt beskrivs metoder för att manipulera element i DOM-struktur. Element kan infogas före och efter ett annat element.

Infoga inuti 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.

Manipulationsmetoder
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")
Exempel

På första raden väljs först element ut att lägga till inuti och sen läggs text till sist inuti elementet. Samma sak sker på andra raden, men här "väljs" först text att lägga till och som argument till metod skickas element att lägga till text till.

Y.one("#errors").append("Some error text");

var newP = Y.Node.create("<p>Some error text</p>");
newP.appendTo("#errors");

Större exempel

Kopiera och ta bort

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.

Metoder för manipulation av 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.

Metoder för manipulation av attribut/egenskaper
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

Referenser

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