Получая имя элемента в качестве объекта

Question

Это мой код JavaScript:

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

возвращает ошибку. Как передать функции имя элемента, чтобы изменить его значение?

Answer 1

Для быстрого исправления:

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

Но имейте в виду, что это получает значение, а не сам элемент. Чтобы получить элемент, а затем изменить значение, сделайте следующее:

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

Кроме того, вы должны использовать другой способ доступа к элементам вместо document.all. Посмотрите на использование идентификаторов вместо имен с помощью функции document.getElementById(). См. Этот список JavaScript best practices.

В качестве Peter Bailey points out in his answer многие элементы HTML могут иметь одно и то же имя. Это одна из причин, почему document.getElementById() является предпочтительным: идентификаторы элементов уникальны (в действительном HTML, конечно).

Answer 2

Если под «именем» вы подразумеваете «атрибут имени», вы должны понимать, что имена не уникальны для HTML-документа. Им нужен контекст.

Хотя вы можете использовать document.all - это нестандартно и работает только в IE. Вам будет лучше использовать более кросс-браузерный механизм.

Как правило, атрибуты имен будут принадлежать элементам в форме, например <input/> и <select> элементов. Имена этих элементов отображаются как свойства свойства <form>elements в DOM.

Если вы можете получить доступ к объекту DOM формы, вы также можете получить доступ к его объектам DOM.

Пример

<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>