Thực tiễn tốt nhất: Truy cập các yếu tố biểu mẫu bằng id hoặc thuộc tính tên HTML?

Như bất kỳ nhà phát triển JavaScript dày dạn nào cũng biết, có rất nhiều (quá nhiều) cách để làm điều tương tự. Ví dụ: giả sử bạn có trường văn bản như sau:

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

Có nhiều cách để truy cập điều này trong JavaScript:

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

Các phương thức [1] và [3] được ghi lại tốt trong tài liệu Mozilla Gecko, nhưng cả hai đều không lý tưởng. [1] quá chung chung là không hữu ích và [3] yêu cầu cả id và tên (giả sử bạn sẽ đăng dữ liệu lên ngôn ngữ phía máy chủ). Lý tưởng nhất là tốt nhất chỉ có một thuộc tính id hoặc thuộc tính tên (có cả hai là hơi dư thừa, đặc biệt là nếu id không cần thiết cho bất kỳ css nào và làm tăng khả năng lỗi chính tả, v.v.).

[2] dường như là trực quan nhất và nó dường như được sử dụng rộng rãi, nhưng tôi chưa thấy nó được tham chiếu trong tài liệu của Gecko và tôi lo lắng về cả khả năng tương thích và tương thích trình duyệt chéo (và tất nhiên tôi muốn trở thành càng tuân thủ tiêu chuẩn càng tốt).

Vì vậy, những gì thực hành tốt nhất ở đây? Bất cứ ai cũng có thể chỉ ra một cái gì đó trong tài liệu DOM hoặc đặc tả W3C có thể giải quyết vấn đề này?

Lưu ý Tôi đặc biệt quan tâm đến một giải pháp không phải thư viện (jQuery / Prototype).

Chỉ cung cấp cho biểu mẫu của bạn một id và chỉ nhập tên của bạn :

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

Sau đó, cách tuân thủ tiêu chuẩn nhất và ít vấn đề nhất để truy cập vào phần tử đầu vào của bạn là thông qua:

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

sử dụng .elements["foo"]thay vì chỉ .foothích hợp hơn vì cái sau có thể trả về một thuộc tính có dạng "foo" chứ không phải là một phần tử HTML!

[1] document.forms [0] .elements [0];

" Không-không-không bao giờ! " Khi tôi thấy phương pháp truy cập phần tử này. Vấn đề với điều này là nó giả định rằng DOM là một cấu trúc dữ liệu bình thường (ví dụ: một mảng) trong đó thứ tự phần tử là tĩnh, nhất quán hoặc đáng tin cậy. Chúng tôi biết rằng 99.9999% thời gian, rằng đây không phải là trường hợp. Sắp xếp lại hoặc inputcác thành phần trong biểu mẫu, thêm phần khác formvào trang trước biểu mẫu được đề cập hoặc di chuyển biểu mẫu được đề cập là tất cả các trường hợp mã này bị hỏng. Truyện ngắn: điều này rất mong manh. Ngay khi bạn thêm hoặc di chuyển một cái gì đó, nó sẽ bị hỏng.

[2] tài liệu.myForm.foo;

Tôi với Sergei ILinsky về điều này:

• Truy cập các yếu tố tùy ý bằng cách tham khảo idthuộc tính của chúng :document.getElementById("myform");
• Truy cập các phần tử biểu mẫu được đặt tên theo tên, liên quan đến phần tử biểu mẫu mẹ của chúng: document.getElementById("myform").foo;

Vấn đề chính của tôi với phương pháp này là namethuộc tính là vô dụng khi áp dụng cho một biểu mẫu. Tên không được chuyển đến máy chủ như là một phần của POST / GET và không hoạt động đối với dấu trang kiểu băm.

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

Theo tôi, đây là phương pháp thích hợp nhất. Truy cập trực tiếp là phương pháp ngắn gọn và rõ ràng nhất.

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

Theo tôi, điều này có thể chấp nhận được, nhưng dài dòng hơn mức cần thiết. Phương pháp # 3 là thích hợp hơn.

Tôi chỉ tình cờ xem một video từ Douglas Crockford và anh ấy đã cân nhắc về chính chủ đề này. Điểm quan tâm là -12: 00. Để tóm tắt:

• Bộ sưu tập tài liệu (document.anchor, document.form, v.v.) đã lỗi thời và không liên quan (phương pháp 1).
• Các namethuộc tính được sử dụng để đặt tên sự vật, không để truy cập chúng. Nó là để đặt tên những thứ như cửa sổ, trường đầu vào và thẻ neo.
• "ID là thứ mà bạn nên sử dụng để xác định duy nhất một yếu tố để bạn có thể truy cập vào nó. Chúng (tên và ID) đã từng có thể hoán đổi cho nhau, nhưng chúng không còn nữa."

Vì vậy, có bạn có nó. Về mặt ngữ nghĩa, điều này có ý nghĩa nhất.

Để truy cập các phần tử được đặt tên được đặt trong một biểu mẫu, đó là một cách thực hành tốt để sử dụng formchính đối tượng.

Để truy cập một phần tử tùy ý trong cây DOM đôi khi có thể được tìm thấy trong một biểu mẫu, hãy sử dụng getElementByIdvà phần tử id.

Tôi rất thích một phương pháp thứ 5. Đó là
[5] Sử dụng mã định danh JavaScript đặc biệt này để truyền đối tượng biểu mẫu hoặc trường cho hàm từ trình xử lý sự kiện.

Cụ thể, đối với các hình thức:

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

và

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

Sử dụng kỹ thuật này, hàm không bao giờ phải biết
- thứ tự các biểu mẫu được xác định trong trang,
- ID biểu mẫu, cũng như
- tên biểu mẫu

Tương tự, đối với các trường:

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

và

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

Trong trường hợp này, hàm không bao giờ phải biết tên hoặc id của trường trọng lượng cụ thể, mặc dù không cần biết tên của trường giới hạn trọng lượng.

Nó không thực sự trả lời câu hỏi của bạn, nhưng chỉ về phần này:

[3] yêu cầu cả id và tên ... có cả hai đều hơi dư thừa

Bạn rất có thể cần phải có một idthuộc tính trên mỗi trường biểu mẫu, để bạn có thể liên kết <label>phần tử của nó với nó, như thế này:

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

Điều này là bắt buộc đối với khả năng truy cập (nghĩa là nếu bạn không liên kết nhãn biểu mẫu và kiểm soát, tại sao bạn lại ghét người mù đến vậy?).

Nó hơi dư thừa, mặc dù ít hơn nên khi bạn có hộp kiểm / nút radio, trong đó một vài trong số chúng có thể chia sẻ a name. Cuối cùng, idvà namedành cho các mục đích khác nhau, ngay cả khi cả hai thường được đặt cùng một giá trị.

Điều này hơi cũ nhưng tôi muốn thêm một điều tôi nghĩ là có liên quan.
(Tôi có ý kiến ​​nhận xét về một hoặc 2 chủ đề ở trên nhưng có vẻ như tôi cần danh tiếng 50 và tôi chỉ có 21 tại thời điểm tôi viết bài này. :))
Chỉ muốn nói rằng có những lúc tốt hơn để truy cập vào các phần tử của một hình thức theo tên chứ không phải theo id. Tôi không nói về hình thức chính nó. Biểu mẫu, OK, bạn có thể cung cấp cho nó một id và sau đó truy cập nó. Nhưng nếu bạn có một nút radio trong một hình thức, việc sử dụng nó như một đối tượng duy nhất (nhận và đặt giá trị của nó) sẽ dễ dàng hơn nhiều và bạn chỉ có thể thực hiện việc này theo tên, theo như tôi biết.

Thí dụ:

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

Bạn có thể nhận / đặt toàn bộ giá trị đã kiểm tra của nút radio R1 bằng cách sử dụng
document.mainForm.R1.value
hoặc
document.getEuityById ("mainForm"). R1.value
Vì vậy, nếu bạn muốn có một kiểu đơn nhất, bạn có thể muốn luôn luôn sử dụng phương thức này, bất kể loại phần tử biểu mẫu. Tôi, tôi hoàn toàn thoải mái khi truy cập các nút radio theo tên và hộp văn bản theo id.

Đã lỗi thời Tôi luôn sử dụng cú pháp 'document.myform.myvar' nhưng gần đây tôi thấy nó thất bại trong Chrome (OK trong Firefox và IE). Đó là một trang Ajax (nghĩa là được tải vào thuộc tính bên trong của div). Có thể Chrome đã không nhận ra biểu mẫu là một thành phần của tài liệu chính. Tôi đã sử dụng getEuityById (không tham khảo biểu mẫu) và nó hoạt động tốt.

Chỉ cần thêm vào mọi thứ đã nói, bạn có thể truy cập vào tài inputkhoản bằng namehoặc idsử dụng tốt nhất là thuộc elementstính của biểu mẫu Đối tượng, vì nếu không có nó, bạn có thể có một thuộc tính có dạng "foo" thay vì phần tử HTML. Và theo @Paul D. Chờ đợi, hoàn toàn ổn khi có cả tên và id.

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>

Theo MDN trên trang HTMLFormEuity.elements

Các phần tử thuộc tính HTMLFormE bổ sung trả về một HTMLFormControlsCollection liệt kê tất cả các điều khiển biểu mẫu có trong phần tử. Độc lập, bạn có thể nhận được số lượng điều khiển biểu mẫu bằng cách sử dụng thuộc tính độ dài.

Bạn có thể truy cập một điều khiển biểu mẫu cụ thể trong bộ sưu tập được trả về bằng cách sử dụng chỉ mục hoặc tên hoặc id của phần tử .

namelĩnh vực hoạt động tốt. Nó cung cấp một tài liệu tham khảo đến elements.

parent.children- Sẽ liệt kê tất cả các yếu tố với một trường tên của cha mẹ. parent.elements- Sẽ chỉ liệt kê form elementsnhư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>

Lưu ý: Để .elementslàm việc, parentcần phải là a <form> tag. Trong khi đó, .childrensẽ làm việc trên bất kỳ HTML-element- chẳng hạn như <div>, <span>, etc.

Chúc may mắn...

Mẫu 2 là ok, và mẫu 3 cũng được khuyến khích.
Sự dư thừa giữa tên và id là do nhu cầu giữ tính tương thích, trên html 5, một số thành phần (như img, biểu mẫu, iframe và như vậy) sẽ mất thuộc tính "tên" của chúng và chúng tôi khuyên bạn chỉ nên sử dụng id của chúng để tham chiếu chúng từ bây giờ trên :)

Để bổ sung cho các câu trả lời khác, document.myForm.foo được gọi là DOM cấp 0, đây là cách mà Netscape triển khai và do đó không thực sự là một tiêu chuẩn mở mặc dù được hầu hết các trình duyệt hỗ trợ.

Kiểm tra trang này: https://developer.mozilla.org/En/DOM/Document.getElementsByName

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

Nó phải là 'phần tử' và phải trả về một mảng vì nhiều phần tử có thể có cùng tên.

Câu trả lời của tôi sẽ khác nhau về câu hỏi chính xác. Nếu tôi muốn truy cập một yếu tố nhất định cụ thể, thì tôi sẽ sử dụng document.getEuityById (). Một ví dụ là tính toán tên đầy đủ của một người, bởi vì nó đang được xây dựng trên nhiều lĩnh vực, nhưng nó là một công thức lặp lại.

Nếu tôi muốn truy cập phần tử như một phần của cấu trúc chức năng (một biểu mẫu), thì tôi sẽ sử dụng:

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

Đây là cách nó cũng hoạt động từ quan điểm của doanh nghiệp. Các thay đổi trong vòng lặp đi cùng với các thay đổi chức năng trong ứng dụng và có ý nghĩa. Tôi áp dụng nó chủ yếu để xác nhận thân thiện với người dùng và ngăn chặn các cuộc gọi mạng để kiểm tra dữ liệu sai. Tôi lặp lại phía máy chủ xác nhận (và thêm vào đó một số thứ nữa), nhưng nếu tôi có thể giúp phía khách hàng của người dùng, thì điều đó có lợi cho tất cả.

Để tổng hợp dữ liệu (như xây dựng biểu đồ hình tròn dựa trên dữ liệu trong biểu mẫu) tôi sử dụng các tài liệu cấu hình và các đối tượng Javascript được tạo tùy chỉnh. Sau đó, ý nghĩa chính xác của trường quan trọng liên quan đến bối cảnh của nó và tôi có sử dụng document.getEuityById () không.

Bởi vì trường hợp [2] document.myForm.foolà một phương ngữ từ Internet Miningere. Vì vậy, thay vì nó, tôi thích document.forms.myForm.elements.foohoặc document.forms["myForm"].elements["foo"].

Tôi thích cái này

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