Dubbio su accesso a un tag input racchiuso dentro una form

di
xPieroxk
il
4 risposte
X
xPieroxk
Pochi posts
Iscritto da
ago, 2020
Messaggi:
2

Dubbio su accesso a un tag input racchiuso dentro una form

Ho il seguente codice HTML: 

<form id="myForm">
   <input name="myInput">
</form>
Andando sulla console di Chrome ho digitato 
console.dir(document.getElementById("myForm"))
per stampare l'oggetto 'myForm'. A questo punto mi vengono mostrati tutti gli attributi dell'oggetto,tra questi, ho cominciato a cercare 'myInput' senza risultato positivo...Questo si trova infatti all'interno di un'altro attributo chiamato 'elements'. Quindi per poter stampare direttamente 'myInput' dovrei digitare:
console.dir(document.getElementById("myForm").elements.myInput)
Ma non riesco a capire perchè anche digitando 
console.dir(document.getElementById("myForm").myInput)
ottengo lo stesso risultato. Perchè non ottengo un errore se l'attributo 'myInput' non è presente nell'oggeto 'myForm' se non passando per 'elements'?

Sono uno studente di informatica che sta imparando javascript nel tempo libero, abbiate pietà .

4 Risposte

  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Dubbio su accesso a un tag input racchiuso dentro una form

    xPieroxk ha scritto:

    Perchè non ottengo un errore se l'attributo 'myInput' non è presente nell'oggeto 'myForm' se non passando per 'elements'?
    Che io sappia, le soluzioni che hai adottato per l'accesso sono equivalenti.
  • sspintux
    sspintux
    Utente Attivo
    Iscritto da
    dic, 2012
    Messaggi:
    500

    Re: Dubbio su accesso a un tag input racchiuso dentro una form

    Come si diceva anche in un altro thread,
    javascript è un linguaggio "moooolto elastico" e che da molte libertà
    (ma non è neanche detto che la sua implementazione sia la stessa su tutti i browser anche se la tendenza sembra essere questa).

    Per cui nessuna meraviglia se dovesse funzionare anche così: 
    
var x = document.forms[0].myInput.value;   
alert(x);

x = document.forms.namedItem("myForm").myInput.value;   
alert(x);

x = document.forms["myForm"].myInput.value;   
alert(x);
  • andreadev
    andreadev
    Utente Attivo
    Iscritto da
    ago, 2020
    Messaggi:
    94

    Re: Dubbio su accesso a un tag input racchiuso dentro una form

    In effetti, come dice spintux, ci sono molti modi per prendere i riferimenti agli oggetti in Javascript.
    In questo caso, hai sperimentato una particolarità dell'elemento "form", in quanto gli elementi HTML in generale non hanno la proprietà "elements" e non possono accedere ai figli in base al loro nome.

    Per questo motivo ti suggerirei di adottare soluzioni un po' più generiche, così da non incorrere in problemi quando dovrai prendere i figli di elementi che non sono "form": 
    
document.getElementById("id-elemento"); // Restituisce l'elemento in base all'id, disponibile solo per l'oggetto "document"

document.getElementsByClassName("classe-elemento"); // Ritorna una lista di elementi con una classe specifica

document.querySelector("#id-elemento"); // Il mio preferito, ritorna un elemento in base al selettore css. 

// Puoi anche selezionare un elemento in base al nome nel modo seguente:
document.querySelector("input[name='nome-elemento']");
    Quando usi il metodo che sfrutta i selettori CSS, se vuoi ricevere una lista di tutti gli elementi che rispecchiano il selettore (piuttosto che solo il primo) ti conviene usare il metodo "querySelectorAll".

    Infine, se vuoi accedere direttamente ai figli di un elemento DOM, ti conviene usare la proprietà "children" 
    
let element = document.getElementById(...);
element.children // <-- NodeList contenente tutti gli elementi figli
    Buona giornata



    Riferimenti:




    element.children
  • X
    xPieroxk
    Pochi posts
    Iscritto da
    ago, 2020
    Messaggi:
    2

    Re: Dubbio su accesso a un tag input racchiuso dentro una form

    Grazie mille a tutti per i chiarimenti
Devi accedere o registrarti per scrivere nel forum
4 risposte