모범 사례 : HTML id 또는 이름 속성으로 양식 요소에 액세스 하시겠습니까?

노련한 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"]

후자는 HTML 요소 대신 "foo"라는 형식의 속성을 반환 할 수 있기 때문에 .elements["foo"]그냥 대신에 사용 하는 .foo것이 좋습니다!

[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이 바람직하다.

방금 Douglas Crockford 의 비디오를 보았을 때 그는 바로이 주제에 무게를 두었습니다. 관심 장소는 -12 : 00입니다. 요약:

• 문서 모음 (document.anchor, document.form 등)은 더 이상 사용되지 않으며 관련이 없습니다 (방법 1).
• name속성에 액세스하지 않는 물건의 이름을 사용한다. 창, 입력 필드 및 앵커 태그와 같은 이름을 지정하기위한 것입니다.
• "ID는 요소에 액세스 할 수 있도록 요소를 고유하게 식별하는 데 사용해야하는 것입니다. 이름과 ID는 상호 교환이 가능했지만 더 이상은 아닙니다."

그래서 당신은 그것을 가지고 있습니다. 의미 적으로 이것은 가장 의미가 있습니다.

양식에 배치 된 명명 된 요소에 액세스하려면 form객체 자체 를 사용하는 것이 좋습니다 .

DOM 트리에서 양식 내에서 발견 될 수있는 임의의 요소에 액세스하려면 getElementById및 요소를 사용 하십시오 id.

나는 다섯 번째 방법을 선호합니다. 즉
[5] 식별자를 사용하여 특정 스크립트 이 이벤트 핸들러의 함수 형태 또는 필드 객체를 전달.

특히 양식의 경우 :

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

이 경우, 함수는 특정 가중치 필드의 이름이나 ID를 알 필요가 없지만 가중치 한계 필드의 이름을 알아야합니다.

실제로 귀하의 질문에 대답하는 것이 아니라이 부분에만 있습니다.

[3]을 모두 갖는 ... ID와 이름을 모두 필요로 다소 중복

id어쨌든 각 양식 필드에 속성 이 있어야 하므로 다음과 같이 <label>요소를 요소와 연결할 수 있습니다 .

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

이것은 접근성을 위해 필요합니다 (즉, 양식 레이블과 컨트롤을 연결하지 않으면 왜 시각 장애인을 미워합니까?).

확인란 / 라디오 버튼이있는 경우이 옵션 중 일부가 중복되지만 다소 중복되어 있습니다 name. 궁극적으로, id그리고 name모두가 종종 같은 값으로 설정하는 경우에도, 다른 목적을위한 것입니다.

이것은 조금 낡았지만 관련이 있다고 생각되는 것을 추가하고 싶습니다.
(I 위의 하나 개 또는 2 스레드에 대한 언급을 의미하지만 내가 평판 (50)을 필요로 보인다 난 단지 내가 이것을 쓰고있는 시점에서 21 있습니다. :))
그냥 액세스에 훨씬 더 때 시간이 있다는 것을 말하고 싶은 id가 아닌 이름으로 양식의 요소. 양식 자체에 대해서는 이야기하지 않습니다. 양식은 OK입니다. ID를 부여한 다음 액세스 할 수 있습니다. 그러나 양식에 라디오 버튼이 있으면 단일 객체로 사용하는 것이 훨씬 쉽고 (값 가져 오기 및 설정) 내가 아는 한 이름으로 만 수행 할 수 있습니다.

예:

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

document.mainForm.R1.value
또는
document.getElementById ( "mainForm"). R1.value
를 사용하여 단일 선택 단추 R1의 값을 전체적으로 가져 오거나 설정할 수 있습니다 . 따라서 단일 스타일을 원할 수 있습니다. 양식 요소의 유형에 관계없이 항상이 방법을 사용하려고합니다. 나, 이름으로 라디오 버튼에 액세스하고 ID별로 텍스트 상자에 액세스하는 것이 완벽합니다.

구식이기 때문에 항상 'document.myform.myvar'구문을 사용했지만 최근 Chrome에서 실패했습니다 (Firefox 및 IE에서 OK). Ajax 페이지였습니다 (즉, div의 innerHTML 속성에로드 됨). Chrome에서 양식을 기본 문서의 요소로 인식하지 않았을 수 있습니다. 대신 getElementById (양식을 참조하지 않고)를 사용했으며 정상적으로 작동했습니다.

그냥 모든 것을 추가 이미 당신이 액세스 할 수 말했다 input로 하나들 name또는 id바람직하게 사용 elements없이 당신이 "foo는"이 아닌 HTML 요소라는 형식의 속성을 가져올 수 있기 때문에, 개체 형태의 속성을. @Paul D. Waite에 따르면 이름과 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>

HTMLFormElement.elements 페이지의 MDN에 따르면

HTMLFormElement 속성 요소는 요소에 포함 된 모든 양식 컨트롤을 나열하는 HTMLFormControlsCollection을 반환합니다. 독립적으로 length 속성을 사용하여 양식 컨트롤 수만 얻을 수 있습니다.

색인 또는 요소 이름 을 사용하여 반환 된 컬렉션의 특정 양식 컨트롤에 액세스 하거나 id .

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도 권장됩니다.
이름과 ID 사이의 중복성은 html 5에서 일부 요소 (img, form, 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;