Nom réception de l'élément comme un objet

Question

Ceci est mon code JavaScript:

<script> 
function change(name){ 
    var element = document.all.name.value; 
} 
</script> 

Il renvoie une erreur. Comment passer à la fonction le nom de l'élément afin de changer sa valeur?

Answer 1

Pour une solution rapide:

var element = document.all[name].value; 

Mais gardez à l'esprit cette obtient la valeur, et non pas l'élément lui-même. Pour obtenir l'élément, puis modifiez la valeur, faites:

var element = document.all[name]; 
element.value = 'whee'; 

En outre, vous devriez envisager d'utiliser une autre façon d'accéder aux éléments au lieu de document.all. Regardez dans l'utilisation des ID au lieu des noms avec la fonction document.getElementById(). Voir cette liste JavaScript best practices. Comme Peter Bailey points out in his answer, de nombreux éléments HTML peuvent avoir le même nom. C'est l'une des raisons pour lesquelles document.getElementById() est préférable: les ID d'élément sont uniques (en HTML valide, bien sûr).

Answer 2

Si par "nom" vous voulez dire "attribut de nom", vous devez comprendre que les noms ne sont pas uniques à un document HTML. Ils ont besoin de contexte.

Bien que vous pouvez utiliser document.all - ce n'est pas standard et ne fonctionne que dans IE. Vous ferez mieux d'utiliser un mécanisme plus compatible avec tous les navigateurs.

Généralement, les attributs de nom appartiendront aux éléments d'un formulaire, tels que les éléments <input/> et <select>. Les noms de ces éléments sont exposés en tant que propriétés de la propriété elements de <form> dans le DOM.

Si vous pouvez accéder à l'objet DOM du formulaire, vous pouvez également accéder aux objets DOM de ses éléments.

Un exemple

<form id="foo"> 
    <input type="text" name="test" /> 
</form> 

<span onclick="change('foo', 'test');">Change Value</span> 

<script type="text/javascript"> 

function change(formId, elementName) 
{ 
    // Get the form's DOM object 
    var f = document.getElementById(formId); 

    // Get the element's DOM object 
    var element = f.elements[elementName]; 

    // Modify the element's value property 
    element.value = 'Hello World'; 

    // Note, the above 3 lines can be refactored to this 
    // document.getElementById(formId).elements[elementName].value = 'Hello World'; 
} 

</script>