Ting og tang

Finne elementer

Vi er ofte interessert i å identifisere elementer ved: id, elementtype, class, eller kombinasjoner.

id

Dette er rett fram

var elt=document.getElemenById('minid');

Siden en id skal være unik er det ingen grunn til å gøre noe annet. Dersom id'en ikke er unik kan/bør vi ikke bruke denne.

type

Igjen ligger svaret i en standard javaskriptmetode:

var eltList=document.getElementsByTagName('div');

Merk at denne metoden også er implementert for andre objekter enn document, slik at vi kan finne alle paragrafer inne i et annet element.

var pList=wrapper.getElementsByTagName('p');

Merk også at '*' plukker alle elementer.

class

Vi kan ha flere class-name i en class angivelse. Hvert navn skal være skilt med blank. f.eks.:

<p class="hilited description whatever">
jada
</p>

Vi har en metode som velger elementer ut fra match på en av disse delstrengene:

document.getElementsByClassName('hilited');

Dersom vi ønsker å få tak i hele class-attributten til et element skriver vi f.eks.

elt.className();

kombinasjoner

HTML5 introduserer to metoder som søker ved hjelp av en CSS-selector som filter. Noen eksempler:

document.querySelectorAll('div');
document.querySelectorAll('.hilited');
document.querySelectorAll('.refsection table');
document.querySelectorAll('.refsection table td+td');
document.querySelectorAll('.refsection, .hilited');
// the first or only
document.querySelector('#myid');

Vi ser at disse metodene faktisk gjør de andre (getElementsByClassName, getElementsByTagName, getElementById) overflødige.

Endre class

HTML5 gir oss mulighet for å endre class. Utgangspunktet e altså at vi har en class-attributt med flere klassenavn skilt med blank. Vi oppfatter dette som en liste, classList. Anta elt er et eller annet element.

	// add or remove a class name
	elt.classList.add("hilited");
	elt.classList.remove("hidden");

	// add more than one
	elt.classList.add("hilited","fixed"); 

	// remove or add
	elt.classList.toggle("hilited");

	// is it in the list
	if(elt.classList.contains("hilited"))
		alert("yes");

Finne ved å klikke

Hvilket element har vi klikket på ? Vi vet at når vi låser f.eks. en mousdown til et element så kan vi la elementet idetifisere seg ved en parameter. F.eks. slik:

<div id="14" onmouseDown="doit('14')"> klikk </div>
<div onmouseDown="doit(this)"> klikk </div>

Men hva dersom vi ikke har plantet en slik mousedown-metode ? Vi er bare interessert i å plukke opp en mousedown, ett eller annet sted. Vi kan i utgangspunktet gjøre slik:

function doit(e)
{
    var elt=e.target;
    // elt is now the element where the event originated
    return false;
}

og plante en generell evenhandler for det elementet som skal avgrense det området vi skal plukke opp. F.eks. ved å plassere følgende nederst på siden:

<script  type="text/javascript"> document.onmousedown=doit;</script>

function doit2(e)
{
    var elt=e.target;
    while ((elt.tagName != "HTML") //IE
         && (elt.tagName != "BODY") 
         && (elt.className != "hilited"))
    {
        elt=elt.parentNode;//parenElement    
    }
    if (elt.className=="hilited")
        elt.style.fontWeight="bold";
}

Plante metoder

En annen oppgave kan være at vi ønsker å plante metoder i identifiserbare elementer. Framgangsmåten blir helt tilsvarende:

...
elt.onmousedown=select;
elt.onmouseup=drop;
...

der select og drop er metoder vi har definert.

Element posisjon

Hvor er dette element i vinduet? (klikk her)

Følgende funksjon er nyttig:

function findPos(obj){
    var curleft = curtop = 0;
    if (obj && obj.offsetParent) {
        do {
                curleft += obj.offsetLeft;
                curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    return [curleft,curtop];
}

Cookies

Cookies er måten vi tradisjonelt har brukt til "sette spor" på en webside

For mange formål er HTML5 standarden localstorage og sessionStorage å foretrekke, se HTML.

I alle fall for de som har bruk for det, et enkelt bibliotek fra Peter-Paul Kochs Quirksmodeside [1] .

function createCookie(name,value,days) {
        if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
}

function eraseCookie(name) {
        createCookie(name,"",-1);