Ting og tang

Finne elementer

Vi er ofte interessert i å identifisere elementer ved:

• id
• type
• class
• 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. Du finner et eksempel på modulen Eksempel 6 .

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)
{
    // caring for old IE:
    /*r e=window.event;
    var elt=undefined;
    if(e.target)
        elt=e.target;
    else //IE
        elt=e.srcElement;
    */
    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";
        return false;
    }
}

En annen oppgave kan være at vi ønsker å plante metoder i identifiserbare elementer. Framgangsmåten blir helt lik. I stedet for å endre style, vil kanskje skrive:

...
elt.onmousedown=select;
elt.onmuseup=drop;
...

der select og drop er metoder vi har definert.

Element posisjon

Hvor er et element ? Følgende nyttige funksjon er funnet hos Quirksmode [1] .

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];
    }
}