 |
|
 |
|
|
|
|
Subiectul anterior
:: Subiectul urmator |
|
Autor |
Mesaj |
|
Elektro_Love
Administrator
Data inscrierii: 21/Iul/2010
Mesaje: 101
|
 Trimis:
21/07/2010 23:52 Titlul subiectului:
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 întrebuințat si in scripturi JavaScript pentru a lucra cu elementele si continutul etichetei HTML. Astfel, id-ul poate face o legatura intre JavaScript si indiferent ce 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 utiliza 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 grad 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. Astea 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.
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 altera 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", utilizat 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.
| Citat: | <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.
- Observati ca fereastra Alert va afisa "title", numele atributului, care desi este al treile, adaugarea in matricea "attributes[]" se face de la dreapta si întâiul 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.
| Citat: | <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.
- 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 inițialul element al acesteia.
3. getAttribute() si setAttribute()
In acest exemplu sunt utilizate 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 oferă parametrul 1, caz in care functia va modifica valoarea atributului "title" din debutantul link inainte de preluarea lui, rezultat care se va vedea in fereastra Alert.
| Citat: | <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> |
Sfat: Cand doriti sa schimbati valoarea unei clase, in loc de "setAttribute()" folositi className, căci IE creaza nereguli 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.
| Citat: | <script type="text/javascript">
<!--
function test4() {
document.getElementById("ex4").href="http://www.marplo.net/javascript/";
}
//-->
</script>
<a href="http://www.marplo.net/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).
- 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).
| Citat: | <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> |
- Observati ca desi este folosita aceeasi formă "document.getElementById("ex5").innerHTML", aceasta are rezultate 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.
| Citat: | <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> |
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.
| Citat: | <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> |
_________________
[url=http://www.fodey.com/generators/animated/ninjatext.asp] [/url] |
|
|
|
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
Tutoriale JavaScript
