[JavaScript] cambiare attributi di un tag

[fero86]

salve.

sto apprendendo un po' di programmazione web lato client (scripting JavaScript per il browser in sostanza) e mi ponevo l'obiettivo di cambiare un'immagine presente nella pagina quando ci si clicca sopra. il metodo getElementById dell'oggetto Document permette di trovare un oggetto Node (se non erro) che rappresenta un elemento della pagina, allora io ho pensato la mega-niubbata e ho fatto un tentativo pigrissimo, cosi tanto per:

<img id="immagine" src="1.png" alt="" onclick="document.getElementById('immagine').src = '2.png';"/>

e funzionah!!! :eek:

ci clicco sopra e l'immagine cambia, e funziona con tutti e tre i principali browsers: IE, FF e Chrome!! :eek:

ora, il fatto che funzioni mi va benissimo anche se non me lo aspettavo :D ma a qualcuno piu esperto di me vorrei chiedere come mai funziona e se esiste qualche documentazione (DOM?) che dice che debba funzionare. in altre parole vorrei sapere se é un comportamento standard perché voglio evitare assolutamente di usare caratteristiche non standard.

sconfinatamente grazie!

[DanieleC88]

Certo, è così che si fa di norma: http://www.w3schools.com/js/js_ex_dom.asp → “Image Object” → “Change the src of an image” → http://www.w3schools.com/js/tryit.asp?filename=try_dom_image_src

[fero86]

ottimo, questa informazione giá mi é utile, peró la mia domanda (espressa malissimo, mi scuso) era piu generale perché io volevo sapere se é standard fare questa cosa per qualunque attributo di qualunque tag.

per esempio, se invece che l'immagine di un tag <img> volessi cambiare il target di un link? posso sempre usare il nome dell'attributo come se fosse un campo dell'oggetto Node che trovo con getElementById? nel caso del link potrei scrivere una cosa come:

document.getElementByid("id del link").href = "nuovo link";

visto che é l'attribut href del tag <a> a definire il target del link?

[DanieleC88]

Che io sappia, sì: ad esempio, nel caso dell'anchor <a>:

http://www.w3schools.com/jsref/dom_obj_anchor.asp

Ma comunque sia, c'è l'array attributes del generico oggetto HTMLElement che ti dovrebbe dare dinamicamente accesso agli attributi definiti in un elemento qualsiasi dell'albero DOM:

http://www.w3schools.com/jsref/dom_obj_all.asp

P.S.: il riferimento completo è in questa pagina: http://www.w3schools.com/jsref/default.asp

[fero86]

ok, grazie mille!

mi piacerebbe capire se il DOM definisce apposta nomi di attributi corrispondenti ai nomi degli attributi dei tag HTML o se esiste qualche specifica che dice che ogni nodo deve esporre sotto forma di campi tutti i suoi attributi, quindi attendo qualche altro parere.

[MEMon]

In javascript un "Element" html è letteralmente un oggetto vero e proprio, gli puoi associare qualunque proprieta o funzione, per esempio:

var div=document.getElementById("mydiv");
div.x=100;

alert(div.x); //alert 100

// e se modifichi qualche proprietà che è anche un attirbuto html
div.name="div_test";
// questo si rispecchierà nel codice html, quindi ora il tuo div ha l'attributo name settato


Guarda un pò http://www.javascriptkit.com/javatutors/oopjs.shtml per farti capire come gestire qualche oggettino con javascript.
Nello stesso sito trovi anche le references per lavorare con il DOM e con javascript in generale.

[fero86]

In javascript un "Element" html è letteralmente un oggetto vero e proprio, gli puoi associare qualunque proprieta o funzione, si, questo lo sapevo, ma alla fine (con un po' di esperienza in piu collezionata da ieri) ho concluso che tra le due alternative del post #5 deve essere la prima. per esempio qui c'é la specifica dell'interfaccia implementata dagli oggetti che rappresentano le ancore: http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-48250443

e contiene effettivamente tutti gli attributi di un tag <a>, mi pare. stessa cosa per tutte le altre interfacce analoghe.



Guarda un pò http://www.javascriptkit.com/javatutors/oopjs.shtml per farti capire come gestire qualche oggettino con javascript.
Nello stesso sito trovi anche le references per lavorare con il DOM e con javascript in generale. ok, ora lo guardo perché quello su w3schools mi sembra incompleto. grazie mille.