Lucrul cu getElementById

ID-ul este un atribut care poate fi adaugat in etichetele (sau tag-urile) HTML. Prin valoarea data acestui atribut se atribuie un nume unic etichetei respective. Acest "id" poate fi folosit in stilurile CSS pentru a defini aspectul grafic si aranjarea in pagina a tag-ului respectiv, dar poate fi folosit si in scripturi JavaScript pentru a lucra cu elementele si continutul etichetei HTML. Astfel, id-ul poate face o legatura intre JavaScript si orice eticheta HTML din document.
Pentru a face referire intr-un script JS la o eticeta HTML, prin intermediul id-ului acesteia, se foloseste urmatoarea sintaxa:

• document.getElementById("id")

- getElementById("id") este o proprietate a obiectului "document", aceasta, dupa cum sugereaza si denumirea, obtine elementul care are id-ul dintre paranteze.
- Puteti folosi si ghilimele simple (' ') pentru numele id-ului din paranteze.

Aceasta sintaxa "document.getElementById("id")" returneaza o referinta la intreg elementul HTML care are acest "id", va defini un obiect continand atributele si continutul acestuia. Pentru a face referire la anumite parti din acest obiect (element HTML), de exemplu la continut sau la un atribut "style", se folosesc proprietati specifice acestui obiect de nivel 2. Mai jos este prezentata o lista cu cele mai folosite.

Proprietati folosite cu "document.getElementById("id")"

• attributes[]   - contine intr-o matrice (cu index de la 0) toate atributele etichetei HTML apelate. Acestea se adauga in matrice incepand de la dreapta spre stanga. Are 2 proprietati:
  • name   - returneaza numele atributului apelat
  • value   - returneaza valoarea atributului apelat
• childNodes   - contine o ierarhie de obiecte care sunt adaugate in matrice. Aceste obiecte sunt formate din elemente ale intreg continutului tag-ului respectiv. Pentru a apela obiectele din fiecare nivel ierarhic se folosesc proprietati specifice. Pentru mai multe detalii cititi documentatia de aici.
  • De exemplu, daca doriti sa obtineti continutul de tip text dintr-un tag, puteti folosi expresia :
  • document.getElementById("id").childNodes[0].nodeValue
• className   - preia sau modifica valoarea atributului "class"
        Exemplu: pt. preluare - var cls=obiect.className;   si pt. atribuire - obiect.className='nume';
• getAttribute("atribut")   - obtine valoarea atributului specificat intre paranteze
• setAttribute("atribut", "valoare")   - modifica valoarea atributului specificat cu valoarea data
• removeAttribute("atribut")   - elimina existenta atributului specificat intre paranteze
• href   - defineste sau obtine valoarea atributului "href" (adresa URL) din etichetele pentru link-uri
• innerHTML   - returneaza sau schimba continutul, inclusiv cod HTML, incadrat de o eticheta HTML
• src   - defineste sau obtine valoarea atributului "src" din etichetele <img>
• style   - defineste valori ale atributului "style", folosit pentru elemente de stil CSS. Aceasta proprietate este urmata de o proprietatea tip CSS.
• value   - se foloseste pentru elemente de formular (din <form>), obtine sau defineste valoarea unei casete (cu un anume id) din formular

Ca sa intelegeti mai bine cum se lucreazaa cu "document.getElementById("id")" si proprietatile prezentate mai sus, iata cateva exemple cu fiecare.

1. attributes[]

In acest exemplu folosim o functie JavaScript care este actionata cand se exzecuta click pe un link, aceasta va afisa o fereastra Alert cu numele atributului al doilea din eticheta pentru link.

<script type="text/javascript">
<!--
function test(val) {
    var nume_a = val.attributes[1].name;
    alert(nume_a);
}
//-->
</script>

<a href="#" id="id_link" title="Link pt. test" onclick="test(this)">Un link</a>

- Observati ca nu am folosit "document.getElementById("un_id")", dar am folosit proprietatea "this". Aceasta face referire la elementul curent care este actionat, astfel, in script, in loc de val.attributes[1].name se putea folosi document.getElementById('id_link').attributes[1].name, rezultatul aici este acelasi.
- Acest exemplu va afisa in pagina un link precum urmatorul, dati click pentru a vedea rezultatul.

Un link

- Observati ca fereastra Alert va afisa "title", numele atributului, care desi este al treile, adaugarea in matricea "attributes[]" se face de la dreapta si primul element are insex 0, al doilea 1 (aici 'title'), si tot asa.

2. childNodes

Lucrul cu childNodes necesita cunoasterea mai multor proprietati care apartin de acesta, dar aici voi prezenta un exemplu simplu ca sa intelegeti cum se foloseste.
In acest exemplu avem un DIV in cadrul careia este un text oarecare si o eticheta SPAN. Pentru a vedea rezultatul scriptului cu "childNodes", un link apeleaza functia acestui script.

<script type="text/javascript">
<!--
function test2() {
    var val2 = document.getElementById("ex2").childNodes[1].childNodes[0].nodeValue;
    alert(val2);
}
//-->
</script>

<div id="ex2">Un text oarecare - <span>JavaScript in span</span> - alt text</div>
<a href="#" onclick="test2()" title="Exemplu cu childNodes">Test 2</a>

- "document.getElementById("ex2").childNodes[1].childNodes[0]" s-ar putea traduce: primul element ( childNodes[0] ) al elementului doi ( childNodes[1] ) din eticheta cu id="ex2", iar "nodeValue" returneaza valoarea.
- Acest exemplu va afisa in pagina urmatoarele doua randuri, dati click pe link-ul "Test 2" pentru a vedea rezultatul.

Un text oarecare - JavaScript in span - alt text

Test 2

- Va afisa textul din SPAN, eticheta <span> cu tot continutul ei este al doilea element al DIV-ului (primul fiind sirul "Un text oarecare -"), iar sirul din cadrul etichetei SPAN este primul element al acesteia.

3. getAttribute() si setAttribute()

In acest exemplu sunt folosite doua link-uri care actioneaza o functie JS care va prelua valoarea atributului specificat (aici 'title') si o va afisa in fereastra Alert.
Al doilea link transmite parametrul 1, caz in care functia va modifica valoarea atributului "title" din primul link inainte de preluarea lui, rezultat care se va vedea in fereastra Alert.

<script type="text/javascript">
<!--
function test3(nr) {
    if (nr == 1) {
        document.getElementById("ex3").setAttribute('title', 'Valoare title modificata');
   }
    var val3 = document.getElementById("ex3").getAttribute('title');
    alert(val3);
}
//-->
</script>

<a href="#" id="ex3" title="Exemplu cu getAttribute()" onclick="test3(0)">Link 1</a> - <a href="#" title="Link 2 - setAttribute()" onclick="test3(1)">Link 2</a>

- Acest exemplu va afisa in pagina urmatoarele doua link-uri, dati click pe primul apoi pe al doilea si iar pe primul; veti observa diferenta.

Link 1 - Link 2

Sfat: Cand doriti sa schimbati valoarea unei clase, in loc de "setAttribute()" folositi className, deoarece IE creaza probleme cu "setAttribute" pt. clase.
Exemplu:
        obiect.className = 'nume_clasa';

4. href

Aici este prezentat un exemplu care modifica adresa URL adaugata in atributul 'href' al unui link.

<script type="text/javascript">
<!--
function test4() {
    document.getElementById("ex4").href="http://www.discant.ro/javascript/";
}
//-->
</script>

<a href="http://www.discant.ro/jocuri/" id="ex4" title="Exemplu cu href" target="_blank">Jocuri</a>

- Link-ul de mai jos, desi are scris in codul lui sa deschida pagina de jocuri, prin evenimentul 'onmouseover' care apeleaza functia "test4()" la pozitionarea mouse-ului pe link se modificat valoarea atributului 'href' si va deschide alta pagina (aceea setata in functie).

Jocuri

- Similar puteti proceda si cu "src", care se refera la atributul 'src' din tag-urile <img>

5. innerHTML

Cu innerHTML se poate prelua continutul incadrat de o eticheta HTML, dar poate sa si inlocuiasca cu altul acest continut, folosind inclusiv tag-uri.
In acest exemplu avem DIV-ul de la exemplu 2 si doua link-uri, acestea apeleaza o functie JS care pentru primul link va afisa o fereastra Alert cu tot continutul DIV-ului iar pentru al doile link va inlocui acest continut cu sirul din atributul 'title' (transmis ca parametru).

<script type="text/javascript">
<!--
function test5(vl) {
    if (vl == 0) {
        var val5 = document.getElementById("ex5").innerHTML;
        alert(val5);
   }
    else {
        document.getElementById("ex5").innerHTML = vl;
    }
}
//-->
</script>

<div id="ex5">Un text oarecare - <span>JavaScript in span</span> - alt text</div>

<a href="#" title="Exemplu cu innerHTML" onclick="test5(0)">Afiseaza Alert</a> - <a href="#" title="Exemplu cu innerHTML - inlocuire" onclick="test5(this.getAttribute('title'))">Modifica DIV</a>

- In pagina va afisa urmatorul rezultat; dati click pe primul link si apoi pe al doilea.

Un text oarecare - JavaScript in span - alt text

Afiseaza Alert - Modifica DIV

- Observati ca desi este folosita aceeasi expresie "document.getElementById("ex5").innerHTML", aceasta are efecte opuse.
Cand se afla in dreapta caracterului '=' (ca valoare a unei variabile), aceasta expresie obtine continutul din eticheta HTML respectiva.
Cand este scrisa in stanga egalului, aceasta expresie va inlocui continutul etichetei HTML cu valoarea adaugata dupa egal, in dreapta.

6. style

Cu style puteti modifica grafic elementele din pagina, pentru aceasta se folosesc proprietatile si valorile specifice CSS. Sintaxa generala este:
                document.getElementById("id").style.proprietate="valoare"
- "proprietate" si "valoare" sunt preluate din CSS, exemplu: color (proprietate) si blue (valoare).
- diferenta apare la proprietatile CSS compuse, cum e "font-weight", "margin-top" sau "border-top-width" si altele similare. In JavaScript dispare liniuta '-' si cuvintele urmatoare se scriu cu primul caracter majuscula, astfel pentru "font-weight" din CSS in JS este "fontWeight", iar pentru "border-top-width" in JS este "borderTopWidth".
In exemplul prezentat aici avem un DIV in cadrul caruia este un link si un tag SPAN care la inceput are "display:none" (nu apare in pagina). O functie JavaScript care este apelata cu "onmouseover" face ca atunci cand mouse-ul este pe link sa apara continutul din SPAN (adauga acestuia "display:inline") si cand mouse-ul este pozitionat deasupra acestuia, textul devine albastru si ingrosat.

<script type="text/javascript">
<!--
function test6(nr) {
    if (nr == 0) {
        document.getElementById('ex6').style.display = 'inline';
    }
    else if (nr == 1) {
        document.getElementById('ex6').style.color = '#0101ff';
        document.getElementById('ex6').style.fontWeight = 'bold';
    }
}
//-->
</script>

<div>
    <a href="#" title="Exemplu cu style" onmouseover="test6(0)">Link ex6</a>
    - <span id="ex6" style="display:none;" onmouseover="test6(1)">Textul din SPAN, ascuns</span>
</div>

- In pagina va apare urmatorul link, pozitionati mouse-ul pe el apoi mutati cursorul pe textul care apare.

Link ex6   -     Textul din SPAN, ascuns

7. value

Proprietatea value se foloseste cu elemente din formular, aceasta preia sau atribue valori in campurile din formular.
"value" se poate folosi si cu proprietati specifice lucrului cu formulare, in care se utilizeaza numele din atributul "name". (Vedeti detalii si exemple la Lectia 12 si Lectia 13).
- Pentru a folosi proprietatea "value" impreuna cu "getElementById('id')", campul sau caseta de formular la care se face referire trebuie sa aibe atribuita un "id".
Iata un exemplu simplu care afiseaza intr-o fereastra Alert textul scris intr-o caseta de text.

<script type="text/javascript">
<!--
function test7() {
    var val7 = document.getElementById("ex7").value;
    alert(val7);
}
//-->
</script>

<form action="" method="post">
    <input type="text" id="ex7" />
    <input type="button" value="Click" onclick="test7()" />
</form>

- Codul de mai sus va afisa urmatorul rezultat.
- Scrieti ceva in caseta de text si apasati pe butonul "Click".