DOM-ande

**standard** · 19-05-2002, 20:03

Sto cominciando a a studare il DOM per HTML (e XML) dettato dalle specifiche del W3C, e vorrei farvi qualche domanda...

1)Nella mia pagina ho messo il seguente layer vuoto:

<div id=colla></div>

Ho scritto poi questo script:

// creo un elemento (tag) DIV
// a cui setto come attributi degli stili
var divo = document.createElement("div");
divo.setAttribute("style","width:100;height:300;fo nt-family:courier;");

// creo un elemento A in cui setto l'attributo href
var linko = document.createElement("A");
linko.setAttribute("href","pagina.htm");

// creo un nodo di testo
var testo = document.createTextNode("testo che aggiungo dinamicamente")

// a questo punto creo il mio "albero"
// appiccicato al div "colla"
link.appendChild(testo)
divo.appendChild(link)
document.getElementById("colla").appendChild(divo)

Lo script funziona solo in parte con IE6 (funziona bene con NN6), il div che ho creato non prende gli stili! perchè?

2)Ho provato ha creare un elemento (tag) STYLE con:

var stile = document.createElement("style");

ma come faccio a metterci dentro gli stili? o le classi?

3)Quanto utilizzabile è (nei vari browser) il DOM W3C?
4)Sto facendo confusione? continuo astudiare?

grazie e ciao.

**lukeonweb** · 19-05-2002, 23:22

trovi delle buone specifiche sul dom su http://www.jsdir.com (tutorial) ed anche esempi di javascript/xml

prova questo poi

"amici.xml"

<?xml version="1.0"?>

<Amici>
<Amico>
<Nome>Luca</Nome>
<Telefono>0123456789</Telefono>
<Email>webmaster@lukeonweb.net</Email>
</Amico>
<Amico>
<Nome>Tizio</Nome>
<Telefono>0987654321</Telefono>
<Email>webmaster@tizio.it</Email>
</Amico>
<Amico>
<Nome>Caio</Nome>
<Telefono>1357902468</Telefono>
<Email>webmaster@caio.it</Email>
</Amico>
</Amici>

"amici.htm"

<html>
<head>
<title>Binding dei dati con il DSO di Xml</title>
</head>
<body>

<xml id="dsoAmici" src="amici.xml"></xml>

<h2>Binding dei dati con il DSO di Xml</h2>

<table datasrc="#dsoAmici" border="1">
<thead>
<th align="left">Nome</th>
<th align="left">Telefono</th>
<th align="left">Email</th>
</thead>
<tr>
<td><span datafld="Nome"></span></td>
<td><span datafld="Telefono"></span></td>
<td><span datafld="Email"></span></td>
</tr>
</table>

</body>
</html>

by lukeonweb.net

ciao

**standard** · 19-05-2002, 23:45

grazie per gli indirizzi, li guarderò a fondo.
Poi ho provato il tuo esempio....MOOOOOOLTO INTERESSANTE!
...fa tutto da solo...fa tutto quel

<span datafld...

mi potresti spiegare un po' meglio la logica?

mi sa che mi ci metto proprio nello studio del DOM, per quanto riguarda le mie domande (magari finchè non ho studiato)?
grazie e ciao.

**lukeonweb** · 20-05-2002, 00:23

posto il testo di un articolo che ho scritto che non ho ancora pubblicato

Binding dei dati con il DSO di Xml
Un semplice esempio di scambio di dati

Quello che vado a presentare non è che un semplice esempio di scambio di dati che è possibile realizzare con il DSO (Data Source Object), oggetto che permette di richiamare i campi di un file Xml e di formattarli in una pagina Html.

Ipotizziamo di avere un file Xml in cui abbiamo una serie di campi, ad esempio un elenco di amici, e che ogni record del file sia formato dai seguenti campi:

Nome
Telefono
Email
Per incrementare dinamicamente il file Xml è opportuno costruire un software server-side, in genere utilizzando Asp, e di potere, tramite questo, accedere ad un database tipo MS Access o Ms Sql Server.

Tuttavia, questo è solo il primo step verso questa frontiera, ci occuperemo quindi solo di mettere a video quanto detto fin ora. Utilizzeremo la tecnica del Binding dei dati.

Costruiamo il file amici.xml che ospiterà i suddetti dati:

<?xml version="1.0"?>

<Amici>
<Amico>
<Nome>Luca</Nome>
<Telefono>0123456789</Telefono>
<Email>webmaster@lukeonweb.net</Email>
</Amico>
<Amico>
<Nome>Tizio</Nome>
<Telefono>0987654321</Telefono>
<Email>webmaster@tizio.it</Email>
</Amico>
<Amico>
<Nome>Caio</Nome>
<Telefono>1357902468</Telefono>
<Email>webmaster@caio.it</Email>
</Amico>
</Amici>
Nulla di più di un normale file Xml in cui includiamo la dichiarazione iniziale, costruiamo una macrostruttura che chiamiamo Amici che ingloba la microstruttura Amico in cui sono contenuti i suddetti campi.

Costruiamo ora il file amici.htm che ci permetterà di formattare normalmente questi dati:

<html>
<head>
<title>Binding dei dati con il DSO di Xml</title>
</head>
<body>

<xml id="dsoAmici" src="amici.xml"></xml>

<h2>Binding dei dati con il DSO di Xml</h2>

<table datasrc="#dsoAmici" border="1">
<thead>
<th align="left">Nome</th>
<th align="left">Telefono</th>
<th align="left">Email</th>
</thead>
<tr>
<td><span datafld="Nome"></span></td>
<td><span datafld="Telefono"></span></td>
<td><span datafld="Email"></span></td>
</tr>
</table>

</body>
</html>
Nota: utilizziamo per l'intitolazione dei campi i tag Html thead e th per far si che, all'atto dell'apparizione dei dati, non si ripetano per ogni record.

Esaminiamo cosa c'è di nuovo in questa semplice pagina Html:

<xml id="dsoAmici" src="amici.xml"></xml>

Questa stringa di codice è il richiamo Html a file Html, assegnando un identificativo che servirà a due scopi: 1) un'applicazione Xml può richiamare in una pagina Html, o Asp, anche più di un file esterno Xml utilizzando la tecnologia del Binding tramite il DSO, 2) dobbiamo prevedere un richiamo nella struttura Html che effettuerà il stream dal file Xml.

Focalizziamo l'attenzione su quest'ultimo punto: osserviamo la stringa di codice che crea la tabella Html:

<table datasrc="#dsoAmici" border="1">

utilizziamo l'attributo datasrc (Data Source) per associare la tabella alla struttura Xml che richiamiamo, dandogli lo stesso valore dell'identificativo del richiamo al file esterno.

Ultima considerazione, ma non ultima ad aver importanza, è la stringa di codice che richiama i valori dei record dal file Xml:

<td><span datafld="Nome"></span></td>

utilizziamo l'attriuto datafld (Data Field) per richiamare il campo che ci interessa, in questo caso il campo Nome.

Che il file Xml contenga un record o centinaia di record, questo è tutto il codice Html che ci necessita!

ciao

**standard** · 20-05-2002, 00:35

intereSSSSSantiSSSSSSimo...
ma chi scorre le varie strutture? tutto datafld? e perchè si usa proprio uno span?...?

non vedo l'ora di leggere il tuo tutorial finito, a proposito....
...
OTTIMO SITO, anzi se ti servisse un qualche sostegno (da me più che altro morale...però?!),chiedi pure!
Grazie

ps: se avete da aggiungere qualcos'altro o (magari) rispondere alle mie domande...sarei felicissimo.
grazie e ciao

**standard** · 20-05-2002, 10:49

qualcuno che può aiutarmi alle mie prime richieste?

**standard** · 20-05-2002, 19:27

niente?

**lukeonweb** · 20-05-2002, 21:22

letto i link che ti ho postato?

**standard** · 21-05-2002, 00:03

letto i link che ti ho postato?

si, ma non riesco in IE6 a far prendere gli stili ad un div che creo dinamicamente, in particolare:

divo.setAttribute("id","miodiv");
divo.setAttribute("style","position:absolute;left: 200;top:0;width:100;height:300;font-family:courier;");

(tralascio il resto che ho postato sopra), beh, in NN6 il testo viene visualizzato con gli stili, mentre in IE6 NO, se faccio:

alert(divo.getAttribute("style"))

IE6 mi restituisce [Object] (mentre NN6 lo stile che ho inserito)
come si fa?

Poi:

2)Ho provato ha creare un elemento (tag) STYLE con:

var stile = document.createElement("style");

ma come faccio a metterci dentro gli stili? o le classi?

3)Quanto utilizzabile è (nei vari browser) il DOM W3C?
4)Sto facendo confusione? continuo astudiare?

? ? ?

**rinosan_76** · 22-08-2003, 16:20

Scusate l'intrusione...
Possibile che il DSO funzioni solo su IE e non su netscape?
Grazie
Rino

PS: forse in ritardo per le vostre esigenze, ma l'attributo style non si usa in questo modo:

divo.setAttribute("style","qualcosa");

ma:

divo.style.attributo=valore;

così funziona sia su Netscape che su IE

Discussione: DOM-ande

Strumenti discussione

Ricerca discussione

Visualizza

DOM-ande

Permessi di invio