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

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

경험이 풍부한 자바스크립트 개발자라면 누구나 알고 있듯이, 같은 일을 할 수 있는 많은 (너무 많은) 방법들이 있습니다.예를 들어 다음과 같이 텍스트 필드가 있다고 가정합니다.

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

자바스크립트에서는 이에 접근할 수 있는 여러 가지 방법이 있습니다.

[0]  foo
[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와 이름이 모두 필요합니다(assuming 서버 사이드 언어에 데이터를 게시하게 됩니다).이상적으로 id 속성이나 이름 속성만 갖는 것이 가장 좋습니다(둘 다 갖는 것은 다소 중복되며, 특히 id가 어떤 CSS에도 필요하지 않고 오타 가능성이 증가하는 경우).

[2] 가장 직관적이고 널리 사용되는 것 같지만 Gecko 설명서에서 참조된 것을 보지 못했고 포워드 호환성과 크로스 브라우저 호환성 모두 걱정됩니다(물론 가능한 한 표준을 준수하고 싶습니다).

여기서 제일 좋은 연습 방법이 뭐죠?DOM 설명서나 W3C 사양에서 이를 해결할 수 있는 것을 가리킬 수 있는 사람이 있습니까?

참고 저는 특히 도서관이 아닌 솔루션(jQuery/Prototype)에 관심이 있습니다.

양식에 ID만 지정하고 입력한 이름만 지정합니다.

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

그러면 입력 요소에 가장 표준을 준수하고 가장 문제가 없는 방법은 다음과 같습니다.

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

.elements["foo"]만이 아니라.foo후자가 HTML 요소가 아닌 "foo"라는 형식의 속성을 반환할 수 있기 때문에 더 좋습니다!

[1] 문서화하다양식[0].elements[0];

요소 접근 방식을 보면 "아니오-절대로!"가 떠오릅니다.이것의 문제점은 DOM이 요소 순서가 정적이거나 일관적이거나 어떤 식으로든 신뢰할 수 있는 정상적인 데이터 구조(예: 배열)라고 가정한다는 것입니다.우리는 99.9999%가 그렇지 않다는 것을 알고 있습니다.순서 바꾸기 또는input양식 내의 요소, 다른 요소 추가form문제의 양식 앞 페이지로 이동하거나 문제의 양식을 이동하는 것은 모두 이 코드가 깨지는 경우입니다.짧은 이야기: 이것은 매우 깨지기 쉽습니다.무언가를 추가하거나 옮기는 순간 고장이 납니다.

[2] 문서.나의 양식.foo;

이 일에 대해서는 세르게이 일린스키와 함께 합니다.

• 임의 요소를 참조하여 임의 요소에 액세스합니다.id성:document.getElementById("myform");
• 상위 폼 요소에 상대적으로 이름을 사용하여 명명된 폼 요소에 액세스합니다.document.getElementById("myform").foo;

이 방법에 대한 나의 주된 문제는name속성은 양식에 적용할 때 쓸모가 없습니다.이름은 POST/GET의 일부로 서버에 전달되지 않으며 해시 스타일 북마크에 대해 작동하지 않습니다.

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

제 생각에는 이것이 가장 바람직한 방법입니다.직접 접근은 가장 간결하고 명확한 방법입니다.

[4] document.getElementById('내 양식')를 입력합니다.foo;

제 생각에는, 이것은 받아들일 만하지만, 필요 이상으로 장황합니다.방법 #3이 좋습니다.

---

저는 우연히 더글러스 크록포드의 비디오를 보게 되었고 그는 바로 이 주제에 집중했습니다.관심 지점은 -12시입니다.요약하자면:

• 문서 모음(document.anchor, document).양식 등)은 오래되어 관계가 없습니다(method 1).
• name속성은 사물에 접근하기 위해서가 아니라 사물의 이름을 짓는데 사용됩니다.이것은 윈도우, 입력 필드, 앵커 태그 등의 이름을 붙이기 위한 것입니다.
• "ID는 요소에 접근할 수 있도록 요소를 고유하게 식별하는 데 사용해야 하는 항목입니다.예전에는 (이름과 ID) 상호 교환이 가능했지만 지금은 그렇지 않습니다."

자, 여기 있네요.의미론적으로 이것이 가장 일리가 있습니다.

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

폼 내에서 때때로 발견될 수 있는 DOM 트리의 임의 요소에 액세스하려면 다음을 사용합니다.getElementById그리고 원소의id.

질문에 대답하는 게 아니라 이 부분에 대해서만:

[3] 신분증과 이름이 모두 필요합니다...둘 다 가지고 있는 것은 다소 중복됩니다.

당신은 아마도 당신이 필요할 것입니다.id어쨌든 각 양식 필드에 속성을 지정하면 연결할 수 있습니다.<label>요소가 포함된 경우, 다음과 같습니다.

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

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

이는 다소 중복되지만, 여러 개의 체크박스/라디오 버튼이 있을 때는 덜하지만, 여러 개의 체크박스를 공유할 수 있습니다.name. 궁극적으로.id그리고.name둘 다 동일한 값으로 설정되는 경우가 많더라도 서로 다른 용도로 사용됩니다.

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

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

이것은 좀 오래된 것이지만, 관련이 있다고 생각되는 것을 추가하고 싶습니다.
(위의 한 두 개의 스레드에 댓글을 달려고 했는데 평판 50이 필요한 것 같고 이 글을 쓰는 현재 21개밖에 없습니다. :)
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>

R1 라디오 버튼의 체크값을 전체적으로 얻거나 설정할 수 있습니다.
document.mainForm.mainForm. R1.
아니면
document.getElementById("메인 양식"). R1.
따라서 유니터리 스타일을 원하는 경우 폼 요소의 유형에 관계없이 항상 이 메서드를 사용할 수 있습니다.저, 라디오 버튼은 이름으로, 텍스트 박스는 아이디로 접근하는 게 아주 편해요.

오래된 질문, 새로운 통찰력(2021)

이 질문에 대한 몇 가지 훌륭한 답변을 읽고 배운 후, 기본 사항으로 돌아가 더 많은 데이터를 얻기 위해 노력해야 합니다.id그리고.name그들의 기원에 따라 정의됩니다.

결과는 단순하고 계몽적이었습니다.저는 아래와 같이 요약하고 있습니다.

---

• 가장 중요한 사실은 단연코 W3/WHATWG 사양의 별도 섹션에 정의되어 있을 정도로 서로 다르고 목적도 매우 다르다는 것입니다.간단히 말해서:
  • id:
    • DOM(웹 문서 표준) 사양의 일부로 정의되고 HTML(마크업 언어)로 정의되지 않습니다.따라서 HTML(언어)이 아닌 DOM(문서)입니다.
    • 그것의 목적은 문서에서 노드의 고유한 식별과 직접적으로 관련이 있습니다.따라서 노드에 액세스하기에 매우 적합합니다.
    • 고유해야 함
  • name:
    • HTML 사양의 일부로 정의되며 not as and DOM.따라서, 는 DOM(웹 문서)가 아닌 HTML(언어)입니다.
    • 양식의 목적은 양식 제출과 직접적으로 관련이 있습니다. 양식의 구조, 양식의 엔트라이트, 서버로 전송되는 데이터(예: https를 통해) 등입니다.

---

• 위의 데이터와 개발자로서의 축적된 경험을 바탕으로, 저의 주요 결론은 다음과 같습니다.
  1. 사용에 대한 혼란.id아니면name 요소에 접근하는 것은 몇 가지 주요 요인에 의해 발생합니다.
     • DOM 명세에는 용어 요소가 명확하게 정의되어 있지만, HTML 명세에는 DOM, xhtml 네임스페이스 등을 지칭하는 명확한 정의가 없습니다.
     • 개발자들인 우리는 정의의 기술성을 파고드는 것을 좋아하지 않으며(아마도 여기서 이 가정을 자세히 설명할 필요가 없을 수도 있습니다.
     • 결과적으로, 요소라는 용어는 HTML 태그 둘 다를 언급하기 위해 널리 사용됩니다 (예를 들어, a.form) 및 DOM 노드(a 가 존재함에도 불구하고)form는 DOM의 노드이지만 그 반대는 아닙니다.)
     • 자바스크립트는 DOM에서 실제 노드를 검색하기 위해 몇 가지 비하인드 액션이 필요한 자체 콘텐츠(getElementsByTagName, getElementsByName)를 기반으로 DOM에 있는 것들에 액세스하는 여러 가지 방법을 제공합니다.
     • 한편으로는 개발자들이 이러한 요소들에 쉽게 접근할 수 있게 해줍니다. 다른 한편으로는 그 특정한 맥락에서 중요한 역할을 하고 있는 개념과 구조를 숨깁니다.
     • 궁극적으로 위의 요인들은 이 전체 스레드를 만드는 것과 같은 필요하고 영리한 질문들로 이끄는 혼란을 야기합니다.
  2. 답변과 댓글을 읽고 데이터를 수집하고 데이터를 분석하고 결론을 내림으로써 뉴런을 태워버린 후, 질문에 대한 제 대답은 다음과 같습니다.
     • 엄격하게 기술적으로 유지하기를 원한다면(아마도 성능 면에서 약간의 이득이 있을 것입니다), 다음으로 이동합니다.id가능하고 합리적인 곳이면 어디든 - 예를 들어, 그것을 추가하는 것은 이치에 맞지 않습니다.id모든 곳에서; 아마도 그것을 사용하는 것은 말이 되지 않을 것입니다.id에 귀속시키다radio입력 유형
     • 자바스크립트가 제공하는 유연성을 사용하면서도 두 세계에서 최상의 상태를 유지하고 싶다면, 이 스레드에서 @Doin이 제공하는 솔루션을 제안합니다.
     • @paul-d-waite가 가져온 접근성 요소도 감사했습니다.이 답변에서도 동일한 요소가 조사됩니다.
     • 당신이 할 수 있는 모든 것이 아니라는 것을 명심하세요.

---

참조:

1. HTML -name
2. HTML -element
3. DOM -id
4. DOM -element
5. HTML - 생활 표준 — 2021년 11월 5일 마지막 업데이트
6. DOM - 생활 표준 — 2021년 10월 18일 마지막 업데이트

그 요소를 보는 것도 가치가 있습니다.

---

스택 오버플로의 다른 참조:

html에 name 속성이 정말 필요했습니까?

HTML에서 id와 name 속성의 차이

---

보너스: 조급한 사람들을 위해 와 의 짧고 시원한 구분.

구식이기 때문에 항상 'document.myform.myvar' 구문을 사용했지만 최근 Chrome(Firefox 및 IE에서 정상)에서 실패했다는 것을 발견했습니다.Ajax 페이지(즉, 내부에 로드됨)였습니다.div의 HTML 속성).아마도 크롬은 그 양식을 주요 문서의 요소로 인식하지 못했을 것입니다.폼을 참조하지 않고 getElementById를 대신 사용했는데 잘 작동했습니다.

이미 말한 모든 것에 더해서, 당신은 접속할 수 있습니다.input에 대해서도 마찬가지로name아니면id사용하는 것이 좋습니다.elements개체 양식의 속성입니다. 개체 양식이 없으면 HTML 요소가 아닌 "foo"라는 이름의 속성을 얻을 수 있기 때문입니다.@Paul D에 의하면.잠시만요, 이름과 아이디가 둘 다 있는 것은 완벽하게.

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을 반환합니다.독립적으로 길이 속성을 사용하여 폼 컨트롤의 개수만 얻을 수 있습니다.

인덱스 또는 요소의 이름 또는 id를 사용하여 반환된 컬렉션의 특정 양식 컨트롤에 액세스할 수 있습니다.

다른 답변들을 보충하기 위해서, document.myForm.foo는 소위 DOM 레벨 0으로 넷스케이프가 구현하는 방식이므로 대부분의 브라우저에서 지원하더라도 실제로는 개방형 표준이 아닙니다.

양식 2는 괜찮고 양식 3도 추천합니다.

이름과 ID 사이의 중복은 호환성을 유지해야 하는 필요성으로 인해 발생합니다.HTML5에서 일부 요소(img, form, iframe 등)는 "이름" 속성을 잃게 되며, 앞으로는 ID만 사용하여 참조하는 것이 좋습니다 :)

이 페이지를 확인합니다.Document.getElementsByName()

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

둘 이상의 요소의 이름이 같을 수 있으므로 'elements'여야 하며 배열을 반환해야 합니다.

정확한 질문에 대해서는 제 대답이 다를 것입니다.특정 요소에 액세스하려면 document.getElementById()를 사용합니다.예를 들어, 한 사람의 전체 이름을 계산하는 것이 있습니다. 여러 필드 위에 구축되어 있지만 반복 가능한 공식이기 때문입니다.

기능 구조(양식)의 일부로 요소에 액세스하려면 다음을 사용합니다.

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

이것이 비즈니스의 관점에서도 작동하는 방식입니다.루프 내의 변화는 응용프로그램의 기능적 변화와 함께 진행되므로 의미가 있습니다.저는 주로 사용자 친화적인 검증과 잘못된 데이터 확인을 위한 네트워크 호출 방지를 위해 적용합니다.유효성 검사 서버 쪽을 반복하지만(그리고 거기에 추가로), 사용자 클라이언트 쪽을 도울 수 있다면 모두에게 도움이 되는 것입니다.

데이터 집합을 위해(형태의 데이터를 기반으로 파이 차트를 구축하는 것과 같은) 구성 문서와 맞춤형 자바스크립트 객체를 사용합니다.그렇다면 필드의 문맥과 관련하여 정확한 의미가 중요하며 document.getElementById()를 사용해야 합니까?

저는 이것을 선호합니다.

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

왜냐하면 [2] 사건은document.myForm.foo는 인터넷 익스플로러의 방언입니다.

그래서 저는 그 대신에document.forms.myForm.elements.foo아니면document.forms["myForm"].elements["foo"].

name속성이 잘 통합니다.다음과 같은 내용을 참조할 수 있습니다.elements.

parent.children- 부모 이름 필드와 함께 모든 요소를 나열합니다.parent.elements- 목록만 표시form elements예를 들어input-text,text-area.

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>태그. 반면에..children다음과 같은 HTML 요소에서 작동할 것입니다.<div>,<span>.

간략하게 말씀드리겠습니다.

• 사용하다querySelector()양식을 고르다.class아니면#id
• 요소를 선택하는 데 사용합니다.name기여하다

예:

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

document.querySelector('#form').elements.namedItem('foo')

수용된 답변은 이에 가깝습니다. 단, 그것은 제외하고요.namedItem()는 폼 요소를 이름별로 쿼리하기 위한 명시적 API입니다.

참고: 여러 요소의 이름 속성이 동일한 경우(예:radio그리고.checkboxlists), 단일 요소가 아닌 요소 목록을 반환합니다.

언급URL : https://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute