En İyi Uygulama: Form öğelerine HTML kimliğine veya ad özelliğine göre erişin?

Deneyimli herhangi bir JavaScript geliştiricisinin bildiği gibi, aynı şeyi yapmanın birçok (çok) yolu vardır. Örneğin, aşağıdaki gibi bir metin alanınız olduğunu varsayalım:

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

Buna JavaScript'te erişmenin birçok yolu vardır:

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

Yöntemler [1] ve [3] Mozilla Gecko belgelerinde iyi belgelenmiştir, ancak ikisi de idealdir. [1] kullanışlı olamayacak kadar geneldir ve [3] hem bir kimlik hem de bir ad gerektirir (verileri sunucu tarafı diline göndereceğiniz varsayılarak). İdeal olarak, sadece bir id özniteliğine veya bir ad özniteliğine sahip olmak en iyisidir (her ikisine birden sahip olmak, özellikle id herhangi bir css için gerekli değilse ve yazım hataları, vb. Olasılığını arttırırsa) biraz gereksizdir.

[2] en sezgisel gibi görünüyor ve yaygın olarak kullanılıyor gibi görünüyor, ancak Gecko belgelerinde referans aldığını görmedim ve hem ileriye dönük uyumluluk hem de tarayıcılar arası uyumluluk konusunda endişeliyim (ve elbette olmak istiyorum mümkün olduğunca standartlara uygun).

Peki burada en iyi uygulama nedir? Herkes DOM belgelerinde veya W3C spesifikasyonunda bunu çözebilecek bir şeye işaret edebilir mi?

Not Özellikle kütüphane olmayan bir çözüm (jQuery / Prototype) ile ilgileniyorum.

Formunuza yalnızca bir kimlik ve girişinize yalnızca bir ad verin :

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

Ardından, giriş öğenize erişmenin en standart ve en az sorunlu yolu şöyledir:

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

.elements["foo"]sadece .fooHTML yerine "foo" adlı formun bir özelliğini döndürebileceğinden , sadece yerine kullanmak tercih edilir!

[1] belge. Formlar [0]. Elementler [0];

Eleman erişiminin bu yöntemini gördüğümde akla " No-omg-never! " Gelir. Buradaki sorun, DOM'nin, öğe sırasının yine de statik, tutarlı veya güvenilir olduğu normal bir veri yapısı (örneğin: bir dizi) olduğunu varsaymasıdır. Zamanın% 99,9999'unun, durumun böyle olmadığını biliyoruz. inputFormdaki yeniden sıralama veya öğeler, söz konusu formdan formönce sayfaya başka bir öğe ekleme veya söz konusu formu taşıma, bu kodun kırıldığı durumlardır. Kısa öykü: bu çok kırılgan. Bir şey ekler veya taşır hareket etmez kırılır.

[2] document.myForm.foo;

Bu konuda Sergey ILinsky ile beraberim :

• Özelliklerine bakarak rastgele öğelere erişin id:document.getElementById("myform");
• Adlandırılmış form öğelerine, üst form öğelerine göre ada göre erişin: document.getElementById("myform").foo;

Bu yöntemle ilgili asıl sorun, namebir forma uygulandığında özniteliğin yararsız olmasıdır. Ad, POST / GET'in bir parçası olarak sunucuya iletilmez ve karma stili yer imleri için çalışmaz.

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

Bence bu en çok tercih edilen yöntem. Doğrudan erişim en kısa ve net yöntemdir.

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

Bence bu kabul edilebilir, ancak gerekenden daha ayrıntılı. Yöntem # 3 tercih edilir.

Douglas Crockford'dan bir video izledim ve bu konuya ağırlık verdi. İlgilenilen nokta -12: 00'dır. Özetlemek:

• Belge koleksiyonları (belge.anchor, belge.form vb.) Eski ve alakasızdır (yöntem 1).
• nameNitelik bunlara erişmek için değil, şey isim kullanılır. Pencereler, giriş alanları ve bağlantı etiketleri gibi şeyleri adlandırmak içindir.
• "Kimlik, bir öğeyi benzersiz bir şekilde tanımlamak için kullanmanız gereken şeydir, böylece ona erişebilirsiniz. Bunlar (ad ve kimlik) birbirinin yerine kullanılabilirdi, ancak artık değiller."

İşte burada. Anlamsal olarak, bu en mantıklı.

Bir forma yerleştirilmiş adlandırılmış öğelere erişmek için, formnesnenin kendisini kullanmak iyi bir uygulamadır .

DOM ağacında zaman zaman bir form içinde bulunabilecek rastgele bir öğeye erişmek için öğesini getElementByIdve öğesini kullanın id.

5. yöntemi tercih ederim. Yani
[5] Form veya alan nesnesini olay işleyiciden işleve geçirmek için bunu özel JavaScript tanımlayıcısını kullanın .

Özellikle formlar için:

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

ve

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

Bu tekniği kullanarak, işlevin hiçbir zaman bilmek zorunda olmaması
gerekir - formların sayfada tanımlanma sırası,
- form kimliği veya
- form adı

Benzer şekilde, alanlar için:

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

ve

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

Bu durumda, işlev hiçbir zaman belirli bir ağırlık alanının adını veya kimliğini bilmek zorunda değildir, ancak ağırlık sınırı alanının adını bilmesine gerek yoktur.

Sorunuzu gerçekten cevaplamıyor, sadece bu kısımda:

[3] hem bir kimlik hem de bir isim gerektirir ... her ikisine birden sahip olmak biraz gereksizdir

Büyük olasılıkla idher form alanında bir niteliğe sahip olmanız gerekir , böylece <label>öğesini bununla ilişkilendirebilirsiniz , örneğin:

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

Erişilebilirlik için bu gereklidir (örn. Form etiketleri ve denetimleri ilişkilendirmiyorsanız, kör insanlardan neden bu kadar nefret ediyorsunuz?).

Biraz gereksizdir, ancak daha azı, birçoğunun paylaşabileceği onay kutularına / radyo düğmelerine sahip olduğunuzda name. Sonuçta idve nameher ikisi de genellikle aynı değere ayarlanmış olsa bile, farklı amaçlar içindir.

Bu biraz eski ama alakalı olduğunu düşündüğüm bir şey eklemek istiyorum.
(Yukarıdaki bir ya da 2 konu hakkında yorum yapmak istedim ama ben itibara 50 ihtiyacım var ve ben bu yazarken anda sadece 21 var gibi görünüyor. :))
Sadece erişmek için çok daha iyi zamanlar olduğunu söylemek istiyorum id yerine isme göre form öğeleri. Formun kendisinden bahsetmiyorum. Form, tamam, ona bir kimlik verebilir ve sonra ona erişebilirsiniz. Ancak bir formda radyo düğmeniz varsa, tek bir nesne olarak kullanmak (değerini almak ve ayarlamak) çok daha kolaydır ve bunu bildiğim kadarıyla sadece adıyla yapabilirsiniz.

Misal:

<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 radyo düğmesinin kontrol edilen değerini bir bütün olarak kullanarak alabilir / ayarlayabilirsiniz.
document.mainForm.R1.value
veya
document.getElementById ( "MainForm"). R1.value
bir üniter bir tarza sahip isterseniz olabilir, So form öğesinin türünden bağımsız olarak her zaman bu yöntemi kullanmak istersiniz. Ben, radyo düğmelerine ad ve metin kutularına kimliğe göre erişmek çok rahat.

Eski moda olmak her zaman 'document.myform.myvar' sözdizimini kullandım, ancak son zamanlarda Chrome'da başarısız oldu (Firefox ve IE'de Tamam). Bir Ajax sayfasıydı (yani, div öğesinin innerHTML özelliğine yüklenmiş). Belki Chrome formu ana belgenin bir öğesi olarak tanımadı. Bunun yerine getElementById (forma başvurmadan) kullandım ve Tamam çalıştı.

Daha önce söylenen her şeye eklemek için, inputs'ye Object formunun özelliği ile nameveya idtercihen elementsözelliğini kullanarak erişebilirsiniz , çünkü onsuz bir HTML öğesi yerine "foo" adlı bir formun özelliğini alabilirsiniz. Ve @ Paul D'ye göre. Bekleyin, hem isim hem de kimlik sahibi olmak mükemmel.

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>

HTMLFormElement.elements sayfasındaki MDN'ye göre

HTMLFormElement özellik öğeleri, öğede bulunan tüm form denetimlerini listeleyen bir HTMLFormControlsCollection döndürür. Bağımsız olarak, length özelliğini kullanarak yalnızca form denetimlerinin sayısını elde edebilirsiniz.

Dizin veya öğenin adını veya kimliğini kullanarak döndürülen koleksiyondaki belirli bir form denetimine erişebilirsiniz .

namealan iyi çalışıyor. Bir referans sağlar elements.

parent.children- Üst öğenin ad alanına sahip tüm öğeleri listeler. parent.elements- Sadece liste Will form elementsgibiinput-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>

Not: .elementsÇalışabilmek parentiçin a <form> tag. Halbuki, .childrenüzerinde çalışacak HTML-element- gibi <div>, <span>, etc.

İyi şanslar...

Form 2 iyidir ve form 3 de önerilir.
Ad ve kimlik arasındaki fazlalık, uyumluluğu koruma ihtiyacından kaynaklanır, html 5'de bazı öğeler (img, form, iframe ve benzeri gibi) "name" özniteliklerini kaybeder ve bundan sonra bunlara referans vermek için yalnızca kimliklerini kullanmaları önerilir. tarihinde :)

Diğer yanıtları desteklemek için document.myForm.foo, Netscape tarafından uygulanan yol olan DOM seviyesi 0'dır ve bu nedenle çoğu tarayıcı tarafından desteklenmesine rağmen gerçekten açık bir standart değildir.

Bu sayfaya göz atın: https://developer.mozilla.org/En/DOM/Document.getElementsByName

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

Birden fazla öğe aynı ada sahip olabileceğinden, 'öğeler' olmalı ve bir dizi döndürmelidir.

Cevabım kesin soruya göre değişecektir. Belirli bir öğeye özellikle erişmek istersem, document.getElementById () kullanacağım. Bir örnek, bir kişinin tam adını hesaplamaktır, çünkü birden fazla alan üzerine inşa edilmiştir, ancak tekrarlanabilir bir formüldür.

Eleman bir fonksiyonel yapının (form) bir parçası olarak erişmek istiyorsanız, o zaman kullanacağım:

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

Bu, işletme açısından da böyle çalışır. Döngü içindeki değişiklikler, uygulamadaki fonksiyonel değişikliklerle birlikte gider ve bunun için anlamlıdır. Bunu çoğunlukla kullanıcı dostu doğrulama ve yanlış verileri kontrol etmek için ağ çağrılarını önleme için uyguluyorum. Doğrulama sunucusu tarafını tekrar ediyorum (ve orada biraz daha ekliyorum), ancak kullanıcı istemci tarafına yardımcı olabilirsem, o zaman herkes için faydalıdır.

Verilerin toplanması için (formdaki verilere dayalı bir pasta grafik oluşturmak gibi) Yapılandırma belgelerini ve özel yapılmış Javascript nesnelerini kullanıyorum. O zaman alanın bağlamı ile ilgili anlamının tam anlamı nedir ve document.getElementById () yöntemini kullanırım.

Çünkü [2] document.myForm.fooörneği Internet Exploere'den bir lehçedir. Onun yerine, document.forms.myForm.elements.fooya da tercih ederim document.forms["myForm"].elements["foo"].

Bunu tercih ederim

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