แนวทางปฏิบัติที่ดีที่สุด: เข้าถึงองค์ประกอบของฟอร์มด้วยรหัส 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 และชื่อ (สมมติว่าคุณจะโพสต์ข้อมูลเป็นภาษาฝั่งเซิร์ฟเวอร์) ตามหลักการแล้วจะเป็นการดีที่สุดที่จะมีเพียงแอตทริบิวต์ id หรือแอตทริบิวต์ name (การมีทั้งสองอย่างค่อนข้างซ้ำซ้อนโดยเฉพาะอย่างยิ่งถ้า id ไม่จำเป็นสำหรับ css ใด ๆ และเพิ่มโอกาสในการพิมพ์ผิด ฯลฯ )

[2] ดูเหมือนจะใช้งานง่ายที่สุดและดูเหมือนว่าจะมีการใช้กันอย่างแพร่หลาย แต่ฉันไม่เห็นมันถูกอ้างถึงในเอกสารประกอบของ Gecko และฉันกังวลเกี่ยวกับความเข้ากันได้ของการส่งต่อและความเข้ากันได้ข้ามเบราว์เซอร์ (และแน่นอนว่าฉันอยากเป็น เป็นไปตามมาตรฐานที่สุด)

แนวทางปฏิบัติที่ดีที่สุดคืออะไร? ใครสามารถชี้ไปที่บางสิ่งในเอกสาร DOM หรือข้อกำหนด W3C ที่สามารถแก้ไขปัญหานี้ได้

หมายเหตุฉันสนใจโซลูชันที่ไม่ใช่ไลบรารี (jQuery / Prototype) เป็นพิเศษ

ให้แบบฟอร์มของคุณidเท่านั้นและชื่อที่คุณป้อนเท่านั้น:

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

จากนั้นวิธีที่เป็นไปตามมาตรฐานและมีปัญหาน้อยที่สุดในการเข้าถึงองค์ประกอบอินพุตของคุณคือ:

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

การใช้.elements["foo"]แทน just .fooจะดีกว่าเพราะอย่างหลังอาจส่งคืนคุณสมบัติของรูปแบบที่ชื่อว่า "foo" แทนที่จะเป็นองค์ประกอบ HTML!

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

" No-omg-never! " เกิดขึ้นเมื่อฉันเห็นวิธีการเข้าถึงองค์ประกอบนี้ ปัญหาเกี่ยวกับเรื่องนี้คือสมมติว่า DOM เป็นโครงสร้างข้อมูลปกติ (เช่นอาร์เรย์) โดยลำดับองค์ประกอบเป็นแบบคงที่สม่ำเสมอหรือเชื่อถือได้ เรารู้ว่า 99.9999% ของเวลาที่ไม่เป็นเช่นนั้น การเรียงลำดับใหม่หรือinputองค์ประกอบภายในแบบฟอร์มการเพิ่มอีกformในหน้าก่อนฟอร์มที่เป็นปัญหาหรือการย้ายแบบฟอร์มที่เป็นปัญหาล้วนเป็นกรณีที่โค้ดนี้แตก เรื่องสั้น: มันเปราะบางมาก ทันทีที่คุณเพิ่มหรือย้ายบางสิ่งบางอย่างมันจะพัง

[2] document.myForm.foo;

ฉันอยู่กับSergey ILinskyเกี่ยวกับสิ่งนี้:

• เข้าถึงองค์ประกอบโดยพลการโดยอ้างถึง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แอตทริบิวต์ที่ถูกนำมาใช้เพื่อสิ่งที่ชื่อไม่ได้ที่จะเข้าถึงได้ ใช้สำหรับตั้งชื่อสิ่งต่างๆเช่นหน้าต่างช่องป้อนข้อมูลและแท็กจุดยึด
• "ID คือสิ่งที่คุณควรใช้เพื่อระบุองค์ประกอบที่ไม่ซ้ำกันเพื่อให้คุณสามารถเข้าถึงได้พวกเขา (ชื่อและรหัส) เคยใช้แทนกันได้ แต่ไม่ได้ใช้แทนกันอีกต่อไป"

คุณมีแล้ว โดยนัยแล้วสิ่งนี้เหมาะสมที่สุด

ในการเข้าถึงองค์ประกอบที่มีชื่อที่วางอยู่ในรูปแบบควรใช้formวัตถุนั้นเอง

ในการเข้าถึงองค์ประกอบโดยพลการในต้นไม้ DOM ที่อาจมีในโอกาสพบได้ในรูปแบบที่ใช้และขององค์ประกอบgetElementByIdid

ฉันชอบวิธีที่ 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 !=...

เมื่อใช้เทคนิคนี้ฟังก์ชันไม่จำเป็นต้องรู้
- ลำดับที่ฟอร์มถูกกำหนดในเพจ
- ID ฟอร์มหรือ
- ชื่อฟอร์ม

ในทำนองเดียวกันสำหรับฟิลด์:

<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 และ name ... การมีทั้งสองอย่างค่อนข้างซ้ำซ้อน

คุณมักจะต้องมีidแอตทริบิวต์ในแต่ละช่องฟอร์มเพื่อที่คุณจะสามารถเชื่อมโยง<label>องค์ประกอบกับมันได้ดังนี้:

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

สิ่งนี้จำเป็นสำหรับการช่วยสำหรับการเข้าถึง (เช่นถ้าคุณไม่เชื่อมโยงฟอร์มป้ายกำกับและตัวควบคุมทำไมคุณถึงเกลียดคนตาบอดมากขนาดนี้?)

มันค่อนข้างซ้ำซ้อนแม้ว่าจะน้อยกว่าดังนั้นเมื่อคุณมีช่องทำเครื่องหมาย / ปุ่มตัวเลือกซึ่งหลายปุ่มสามารถแชร์ไฟล์name. ท้ายที่สุดidและnameมีวัตถุประสงค์ที่แตกต่างกันแม้ว่าทั้งสองอย่างมักจะตั้งค่าเป็นค่าเดียวกันก็ตาม

มันเก่าไปหน่อย แต่ฉันต้องการเพิ่มสิ่งที่ฉันคิดว่าเกี่ยวข้อง
(ฉันตั้งใจจะแสดงความคิดเห็นในหนึ่งหรือ 2 เธรดด้านบน แต่ดูเหมือนว่าฉันต้องการชื่อเสียง 50 และฉันมีเพียง 21 ในขณะที่ฉันเขียนสิ่งนี้ :))
แค่อยากจะบอกว่ามีบางครั้งที่การเข้าถึง องค์ประกอบของรูปแบบตามชื่อแทนที่จะเป็นรหัส ฉันไม่ได้พูดถึงฟอร์มตัวเอง แบบฟอร์มตกลงคุณสามารถให้รหัสแล้วเข้าถึงได้จากนั้น แต่ถ้าคุณมีปุ่มตัวเลือกในรูปแบบมันจะง่ายกว่ามากที่จะใช้มันเป็นวัตถุชิ้นเดียว (รับและตั้งค่า) และคุณสามารถทำได้โดยใช้ชื่อเท่านั้นเท่าที่ฉันรู้

ตัวอย่าง:

<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
ดังนั้นหากคุณต้องการมีลักษณะรวมกันคุณอาจ ต้องการใช้วิธีนี้เสมอโดยไม่คำนึงถึงประเภทขององค์ประกอบฟอร์ม ฉันฉันสะดวกสบายมากในการเข้าถึงปุ่มตัวเลือกตามชื่อและกล่องข้อความตามรหัส

ฉันใช้ไวยากรณ์ 'document.myform.myvar' มาตลอด แต่ฉันเพิ่งพบว่ามันล้มเหลวใน Chrome (ตกลงใน Firefox และ IE) มันเป็นเพจ Ajax (เช่นโหลดไว้ในคุณสมบัติ innerHTML ของ div) บางที Chrome อาจไม่รู้จักฟอร์มเป็นองค์ประกอบของเอกสารหลัก ฉันใช้ getElementById (โดยไม่ต้องอ้างอิงแบบฟอร์ม) แทนและใช้งานได้ดี

เพียงเพิ่มทุกสิ่งที่กล่าวไปแล้วคุณสามารถเข้าถึงไฟล์ input s ด้วย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 แสดงรายการตัวควบคุมฟอร์มทั้งหมดที่มีอยู่ในองค์ประกอบ คุณสามารถขอรับเพียงจำนวนของตัวควบคุมฟอร์มโดยใช้คุณสมบัติความยาว

คุณสามารถเข้าถึงการควบคุมรูปแบบเฉพาะในคอลเลกชันที่ส่งกลับโดยใช้ดัชนีหรือองค์ประกอบของชื่อหรือรหัส

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จำเป็นต้องเป็น<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 ()

ฉันชอบอันนี้มากกว่า

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

เนื่องจากกรณีนี้ [2] document.myForm.fooเป็นภาษาถิ่นจาก Internet Exploere ดังนั้นแทนที่จะมันฉันชอบหรือdocument.forms.myForm.elements.foodocument.forms["myForm"].elements["foo"]