Il linguaggio JavaScript
 

dubbi su recupero info di un nodo

ciccio 23 Feb 2015 14:01
In questo esempio:


<!DOCTYPE html>
<html>
<body>

<p id="myp">
<label for="nome">Nome</label>
<input type="text" size="20" maxlength="20" id="nome" name="nome">
</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
var x = document.getElementById("myp").firstChild;
var txt = "";
txt += "The node name: " + x.nodeName + "<br>";
txt += "The node value: " + x.nodeValue + "<br>";
txt += "The node type: " + x.nodeType;
document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


La funzione "myFunction()" non mi dovrebbe ritornare "label"
come "nodeName"? Perché invece mi ritorna un generico "#text"?
4ndre4 23 Feb 2015 21:28
On Monday, 23 February 2015 13:01:12 UTC, ciccio wrote:

[...]
> La funzione "myFunction()" non mi dovrebbe ritornare "label"
> come "nodeName"? Perché invece mi ritorna un generico "#text"?

Prova con:

<p id="myp"><label for="nome">Nome</label>
<input type="text" size="20" maxlength="20" id="nome" name="nome">
</p>

Se ci sono spazi tra la chiusura di <p> e il primo elemento figlio, ottieni un
#text.
ciccio 24 Feb 2015 14:00
4ndre4 <a.laforgia@gmail.com> ha scritto:

> On Monday, 23 February 2015 13:01:12 UTC, ciccio wrote:
>
> [...]
>> La funzione "myFunction()" non mi dovrebbe ritornare "label"
> #text"?
>
> Prova con:
>
> <p id="myp"><label for="nome">Nome</label>
> <input type="text" size="20" maxlength="20" id="nome" name="nome">
> </p>
>
> Se ci sono spazi tra la chiusura di <p> e il primo elemento figlio,
ottieni un #text.

In effetti così funziona! :-O
Però si è costretti a non poter indentare quel pezzo di codice :-\
andrea.laforgia.fico@gmail.com 24 Feb 2015 15:59
On Tuesday, 24 February 2015 13:00:53 UTC, ciccio wrote:

[...]
> In effetti così funziona! :-O
> Però si è costretti a non poter indentare quel pezzo di codice :-\

Be`, puoi sempre saltare i "#text", se non ti interessano.
Andrea Scartabelli 25 Feb 2015 08:53
On 24/02/15 14:00, ciccio wrote:
> 4ndre4 <a.laforgia@gmail.com> ha scritto:
>
>> On Monday, 23 February 2015 13:01:12 UTC, ciccio wrote:
>>
>> [...]
>>> La funzione "myFunction()" non mi dovrebbe ritornare "label"
>> #text"?
>>
>> Prova con:
>>
>> <p id="myp"><label for="nome">Nome</label>
>> <input type="text" size="20" maxlength="20" id="nome" name="nome">
>> </p>
>>
>> Se ci sono spazi tra la chiusura di <p> e il primo elemento figlio,
> ottieni un #text.
>
> In effetti così funziona! :-O
> Però si è costretti a non poter indentare quel pezzo di codice :-\

Esistono anche:

<https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild>

<https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/lastElementChild>

E, per completezza:

<https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling>

<https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling>

Ma non è sempre una buona idea affidarsi a questi riferimenti che
possono non essere più validi se cambi la struttura del DOM.

Ricorda che c'è anche "querySelector".
Per rimanere nel tuo esempio:

container.querySelector("label[for='nome']")

Avrebbe recuperato il tuo elemento anche se la sua posizione all'interno
del contenitore fosse stata diversa.
ciccio 26 Feb 2015 10:15
andrea.laforgia.fico@gmail.com <andrea.laforgia.fico@gmail.com> ha scritto:

> On Tuesday, 24 February 2015 13:00:53 UTC, ciccio wrote:
>
> [...]
>> In effetti così funziona! :-O
>> Però si è costretti a non poter indentare quel pezzo di codice :-\
>
> Be`, puoi sempre saltare i "#text", se non ti interessano.

Ho risolto diciamo "re-ingegnerizzando" quello che volevo
fare, in pratica faccio in modo di inserire un tag p (prima
della label) assegnando ad esso un id univoco in modo da
rintracciarlo senza problemi con un getElementById().
ciccio 26 Feb 2015 10:22
Andrea Scartabelli <nome.cognome@dallepartidibigg.com> ha scritto:

> On 24/02/15 14:00, ciccio wrote:
>> 4ndre4 <a.laforgia@gmail.com> ha scritto:
>>
>>> On Monday, 23 February 2015 13:01:12 UTC, ciccio wrote:
>>>
>>> [...]
> mi dovrebbe ritornare "label"
>>> #text"?
>>>
>>> Prova con:
>>>
>>> <p id="myp"><label for="nome">Nome</label>
>>> <input type="text" size="20" maxlength="20" id="nome" name="nome">
>>> </p>
>>>
>>> Se ci sono spazi tra la chiusura di <p> e il primo elemento figlio,
>> ottieni un #text.
>>
>> In effetti così funziona! :-O
>> Però si è costretti a non poter indentare quel pezzo di codice :-\
>
> Esistono anche:
>
>
<https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild>
>
> <https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/lastElementChild>
>
> E, per completezza:
>
>
<https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling>
>
>
<https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling>

Interessante, mi erano sfuggiti... Vado subito ad *****izzarli ;-)

> Ma non è sempre una buona idea affidarsi a questi riferimenti che
> possono non essere più validi se cambi la struttura del DOM.

Beh in generale, almeno per le strutture che implemento, una
volta decisa l'impalcatura della web application quella rimane! :-D

Anche se come detto in un'altra risposta, ho risolto proprio
impostando un id ad un tag p prima della label, in modo
da recuperarlo tranquillamente con una chiamata getElementById().


> Ricorda che c'è anche "querySelector".
> Per rimanere nel tuo esempio:
>
> container.querySelector("label[for='nome']")
>
> Avrebbe recuperato il tuo elemento anche se la sua posizione all'interno
> del contenitore fosse stata diversa.
>

Anche questa è molto interessante, tra l'altro ho notato che è
supportata da IE8+, quindi realmente utilizzabile nei vari progetti :-)
Thanks!

Links
Giochi online
Dizionario sinonimi
Leggi e codici
Ricette
Testi
Webmatica
Hosting gratis
   
 

Il linguaggio JavaScript | Tutti i gruppi | it.comp.lang.javascript | Notizie e discussioni javascript | Javascript Mobile | Servizio di consultazione news.