Найкраща практика: Доступ до елементів форми за HTML-атрибутом чи атрибутом імені?

Як знає будь-який досвідчений розробник JavaScript, існує багато (занадто багато) способів зробити те саме. Наприклад, скажіть, що у вас є текстове поле наступним чином:

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

Є багато способів отримати доступ до цього в JavaScript:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

Методи [1] та [3] добре зафіксовані в документації Mozilla Gecko, але вони не є ідеальними. [1] є занадто загальним, щоб бути корисним, і [3] вимагає ідентифікатора, і імені (якщо припустити, що ви будете розміщувати дані на сторонній мові сервера). В ідеалі, найкраще мати лише атрибут id або атрибут імені (наявність обох дещо зайва, особливо якщо ідентифікатор не потрібен жодному css та збільшує ймовірність помилок друку тощо).

[2], здається, найбільш інтуїтивно зрозуміло, і воно, здається, широко використовується, але я не бачив, щоб на нього згадувалося в документації про Gecko, і я переживаю як про сумісність вперед, так і про сумісність браузера (і, звичайно, хочу бути якомога більше відповідають стандартам).

То яка найкраща практика тут? Чи може хтось вказати на щось у документації DOM або специфікації W3C, що могло б це вирішити?

Примітка Мене спеціально цікавить небібліотечне рішення (jQuery / Prototype).

Укажіть форму лише ідентифікатор , а ваше введення лише ім’я :

<form id="myform">
  <input type="text" name="foo">

Тоді найздатніший стандарт та найменш проблемний спосіб отримати доступ до вхідного елемента через:

document.getElementById("myform").elements["foo"]

використання .elements["foo"]замість просто .fooє кращим, оскільки останнє може повернути властивість форми під назвою "foo", а не HTML-елемент!

[1] document.forms [0] .елементи [0];

" Ні-що-ніколи! " Приходить до тями, коли я бачу цей метод доступу до елементів. Проблема в цьому полягає в тому, що він передбачає, що DOM є нормальною структурою даних (наприклад, масив), де порядок елементів є статичним, послідовним або в будь-якому випадку надійним. Ми знаємо, що 99,9999% часу, що це не так. Переупорядкування або inputелементи у формі, додавання іншої formна сторінку до відповідної форми або переміщення відповідної форми - це всі випадки, коли цей код порушується. Коротка історія: це дуже крихко. Як тільки ви щось додасте або перемістіть, це зламається.

[2] document.myForm.foo;

Я з Сергієм Ілінським про це:

• Доступ до довільних елементів, посилаючись на їх idатрибут:document.getElementById("myform");
• Доступ до іменованих елементів форми за назвою відносно їх батьківського елемента форми: document.getElementById("myform").foo;

Моя головна проблема цього методу полягає в тому, що nameатрибут марний при застосуванні до форми. Ім'я не передається серверу як частина POST / GET і не працює для закладок у стилі хеш.

[3] document.getElementById ('foo');

На мою думку, це найбільш переважний метод. Прямий доступ - це найбільш стислий і зрозумілий метод.

[4] document.getElementById ('myForm'). Foo;

На мою думку, це прийнятно, але більш багатослівно, ніж потрібно. Спосіб №3 є кращим.

Мені просто так трапилось подивитися відео з Дугласа Крокфорда, і він зважився на цю саму тему. Цікавий об’єкт - -12: 00. Узагальнити:

• Колекції документів (document.anchor, document.form тощо) є застарілими та неактуальними (метод 1).
• nameАтрибут використовується , щоб назвати речі, а чи не до них доступ. Він призначений для іменування таких речей, як Windows, поля введення та теги прив’язки.
• "Ідентифікатор - це те, що вам слід використовувати, щоб однозначно ідентифікувати елемент, щоб ви могли отримати доступ до нього. Вони (ім'я та ідентифікатор) раніше були взаємозамінними, але вони більше не є."

Так ось у вас це є. Семантично це має найбільше значення.

Для доступу до названих елементів, розміщених у формі, є хорошою практикою використовувати сам formоб’єкт.

Щоб отримати доступ до довільного елемента в дереві DOM, який може бути іноді знайдений у формі, використовуйте getElementByIdта елементи елемента id.

Я дуже віддаю перевагу 5-му методу. Тобто
[5] Використовуйте спеціальний ідентифікатор JavaScript , це , щоб передати форму або поле об'єкта в функції від обробника подій.

Зокрема, для форм:

<form id="form1" name="form1" onsubmit="return validateForm(this)">

і

// The form validation function takes the form object as the input parameter
function validateForm(thisForm) {
  if (thisform.fullname.value !=...

Використовуючи цю техніку, функція ніколи не повинна знати
- порядок, у якому форми визначені на сторінці,
- ідентифікатор форми, а також
- назва форми

Аналогічно для полів:

<input type="text" name="maxWeight">
...
<input type="text" name="item1Weight" onchange="return checkWeight(this)">
<input type="text" name="item2Weight" onchange="return checkWeight(this)">

і

function checkWeight(theField) {
  if (theField.value > theField.form.maxWeight.value) {
    alert ("The weight value " + theField.value + " is larger than the limit");
    return false;
  }
return true;
}

У цьому випадку функція ніколи не повинна знати ім'я чи ідентифікатор конкретного вагового поля, хоча це потрібно знати ім'я поля обмеження ваги.

Це не справді відповідає на ваше запитання, а лише в цій частині:

[3] вимагає і ідентифікатора, і імені ... наявність обох є дещо зайвим

Вам, швидше за все, потрібно буде мати idатрибут у кожному полі форми, так що ви можете пов’язати його <label>елемент з ним, як це:

<label for="foo">Foo:</label>
<input type="text" name="foo" id="foo" />

Це потрібно для доступності (тобто, якщо ви не пов'язуєте мітки форми та елементи управління, то чому ви так ненавидите сліпих людей?).

Це дещо зайве, хоча менше, якщо у вас є прапорці / радіо кнопки, де декілька з них можуть ділитися name. У кінцевому рахунку, idі nameдля різних цілей, навіть якщо обидва часто встановлюються на одне значення.

Це трохи старе, але я хочу додати те, що я вважаю актуальним.
(Я мав на увазі коментувати одну або 2 теми вище, але, здається, мені потрібна репутація 50, і у мене є лише 21 час, коли я це пишу. :))
Просто хочу сказати, що бувають випадки, коли набагато краще отримати доступ до елементи форми за назвою, а не за id. Я не кажу про саму форму. Форму, OK, ви можете дати йому ідентифікатор, а потім отримати доступ до нього. Але якщо у вас є перемикач у формі, набагато простіше використовувати його як єдиний об’єкт (отримання та встановлення його значення), і ви можете це робити лише по імені, наскільки я знаю.

Приклад:

<form id="mainForm" name="mainForm">
    <input type="radio" name="R1" value="V1">choice 1<br/>
    <input type="radio" name="R1" value="V2">choice 2<br/>
    <input type="radio" name="R1" value="V3">choice 3
</form>

Ви можете отримати / встановити перевірене значення перемикача R1 в цілому, використовуючи
document.mainForm.R1.value
або
document.getElementById ("mainForm"). R1.value
Отже, якщо ви хочете мати єдиний стиль, ви можете хочу завжди використовувати цей метод, незалежно від типу елемента форми. Мені, я абсолютно комфортно отримую доступ до радіо кнопок по імені та текстових полів за id

Будучи старомодним, я завжди використовував синтаксис 'document.myform.myvar', але нещодавно виявив, що це не вдалося в Chrome (OK у Firefox та IE). Це була сторінка Ajax (тобто завантажена у внутрішнюHTML-властивість div). Можливо, Chrome не визнав форму як елемент основного документа. Я замість цього використовував getElementById (без посилання на форму), і він працював нормально.

Для того, щоб додати до всього сказаного, ви можете отримати доступ до inputs або з використанням nameабо, idпереважно, elementsвластивості форми Object, тому що без цього ви можете отримати властивість форми з назвою "foo", а не HTML-елемента. За словами @Paul D. Waite, цілком нормально мати і ім’я, і ідентифікатор.

var myForm = document.getElementById("myform")
console.log(myForm.foo.value) // hey
console.log(myForm.foo2.value) // hey
//preferable
console.log(myForm.elements.foo.value) // hey
console.log(myForm.elements.foo2.value) // hey

<form id="myform">
  <input type="text" name="foo" id="foo2" value="hey">
</form>

Згідно MDN на HTMLFormElement.elements сторінці

Елементи властивості HTMLFormElement повертають HTMLFormControlsCollection з переліком усіх елементів форми, що містяться в елементі. Незалежно, ви можете отримати лише кількість елементів форми, використовуючи властивість length.

Ви можете отримати доступ до певного контролю форми у поверненій колекції, використовуючи або індекс, або ім'я або ідентифікатор елемента .

nameполе працює добре. Він надає посилання на elements.

parent.children- Перерахує всі елементи з полем імені батьків. parent.elements- Буде в списку лише form elementsтаких якinput-text, text-area, etc

var form = document.getElementById('form-1');
console.log(form.children.firstname)
console.log(form.elements.firstname)
console.log(form.elements.progressBar); // undefined
console.log(form.children.progressBar);
console.log(form.elements.submit); // undefined

<form id="form-1">
  <input type="text" name="firstname" />
  <input type="file" name="file" />
  <progress name="progressBar" value="20" min="0" max="100" />
  <textarea name="address"></textarea>
  <input type="submit" name="submit" />
</form>

Примітка. Щоб .elementsпрацювати, parentпотреби повинні бути a <form> tag. Тоді як .childrenбуде працювати на будь-якому HTML-element- наприклад, як <div>, <span>, etc.

Щасти...

Форма 2 добре, а форма 3 також рекомендується.
Надлишок між ім'ям та ідентифікатором зумовлений необхідністю зберігати сумісність, у html 5 деякі елементи (як img, форма, iframe тощо) втратять атрибут "name", і рекомендується використовувати лише їх id для посилання на них на :)

Для доповнення інших відповідей document.myForm.foo - це так званий DOM рівень 0, який є способом, реалізованим Netscape, і, таким чином, насправді не є відкритим стандартом, хоча він підтримується більшістю браузерів.

Перевірте цю сторінку: https://developer.mozilla.org/En/DOM/Document.getElementsByName

document.getElementsByName('foo')[0]; // returns you element.

Він повинен бути "елементами" і повинен повертати масив, оскільки більш ніж один елемент може мати те саме ім'я.

Моя відповідь відрізнятиметься від точного запитання. Якщо я хочу отримати доступ до певного елемента конкретно, то я буду використовувати document.getElementById (). Прикладом є обчислення повного імені людини, оскільки воно будується на декількох полях, але це повторювана формула.

Якщо я хочу отримати доступ до елемента як частини функціональної структури (форми), то я буду використовувати:

var frm = document.getElementById('frm_name');
for(var i = 0; i < frm.elements.length;i++){
   ..frm.elements[i]..

Ось як це працює і з точки зору бізнесу. Зміни в циклі відбуваються разом з функціональними змінами в додатку і для цього мають значення. Я застосовую його здебільшого для зручної перевірки та запобігання мережевим дзвінкам для перевірки неправильних даних. Я повторюю сторону сервера перевірки (і додаю туди ще трохи), але якщо я можу допомогти клієнтській стороні користувача, то це корисно для всіх.

Для агрегування даних (наприклад, побудова кругової діаграми на основі даних у формі) я використовую документи конфігурації та об'єкти Javascript, виготовлені на замовлення. Тоді точне значення поля важливе стосовно його контексту і чи використовую я document.getElementById ().

Тому що випадок [2] document.myForm.foo- це діалект від Internet Exploere. Тож замість цього я віддаю перевагу document.forms.myForm.elements.fooабо document.forms["myForm"].elements["foo"].

Я віддаю перевагу цьому

document.forms['idOfTheForm'].nameOfTheInputFiled.value;