JavaScript는 이름으로 요소 가져 오기


127

이 기능을 고려하십시오.

function validate()
{
  var acc = document.getElementsByName('acc').value;
  var pass = document.getElementsByName('pass').value;

  alert (acc);
}

그리고이 HTML 부분 :

<table border="0" cellpadding="2" cellspacing="0" valign="top">
    <tr>
        <td class="td1">Account</td>
        <td class="td2"><input type="text" name="acc" /></td>
    </tr>
    <tr class="td1">
        <td>Password</td>
        <td class="td2"><input type="password" name="pass" /></td>
    </tr>
</table>
<div><button onClick="validate()" class="cupid-greenx">Login now</button></div>

경고 상자가 표시되지만 "정의되지 않음"으로 표시됩니다.


모두 변경할 수 있다면 두 개의 입력 필드에 "id"필드를 추가하고 document.getElementById정확히 하나의 값을 반환하는를 사용하는 것이 좋습니다 .
Odi

4
더 나은 방법은 다음 var inputs = document.getElementsByTagName('input')과 같이 두 요소를 모두 추출 할 수있는 노드 목록을 반환합니다. var pass = inputs.item ( 'pass'). 참고로, 큰 DOM을 처리하는 경우 getElementById매번 전체 트리를 검색하는 반면 노드 목록은 검색하지 않으므로 속도가 빨라질 수 있습니다.
Elias Van Ootegem

참으로 귀여운 코드 XD
Guillermo Gutiérrez 2014 년

답변:


246

이 오류가 표시되는 이유 document.getElementsByNameNodeList요소를 반환 하기 때문 입니다. 그리고 NodeListof 요소에는 .value속성 이 없습니다 .

대신 사용 :

document.getElementsByName("acc")[0].value

30

이 방법에서 복수형에 유의하십시오.

document.getElementsByName()

이는 요소의 배열을 반환하므로 [0]을 사용하여 첫 번째 발생을 가져옵니다. 예 :

document.getElementsByName()[0]

8
그것은, 그것은 :-) NodeList를 배열의 아니에요
플로리안 Margaine

1
@FlorianMargaine는 - 사실 그것은이다 HTMLCollection )
j08691

1
@ j08691 nope :)하지만 혼란 스러울 수 있습니다. : p
Florian Margaine

배열의 정의는 무엇이며 어떻게 다른가요? NodeList는 몇 가지 편리한 메서드를 사용하여 HTMLElement 배열을 둘러싼 객체입니다. 어쨌든, OP에 대한 평신도의 용어로 표현하기 위해 배열이라고 말했습니다.
Ozzy

1
배열에는 NodeList보다 훨씬 많은 메서드가 있습니다. NodeList입니다이 같은으로 배열에서 몇 가지 방법 / 속성을 취 length재산, 그러나 또한 실종 많은 같은 방법,의를 map, forEach우리가 사용해야하는 이유 등 어떤 설명합니다 Array.prototype.forEach.call( NodeList, fn ).
Florian Margaine 2012

11

당신은 이것을 원합니다 :

function validate() {
    var acc = document.getElementsByName('acc')[0].value;
    var pass = document.getElementsByName('pass')[0].value;

    alert (acc);
}

답변에 OP의 예를 사용해 주셔서 감사합니다.
Kris Boyd

@KrisBoyd, 차이점은에서 반환 한 배열에서 첫 번째 요소를 얻는다는 것 getElementsByName입니다. 더 명확하게 말 했어야했을 것입니다. 원하는 경우 자유롭게 편집 할 수 있습니다.
Elliot Bonneville

나는 당신에게 보완을 제공했습니다 :) OP에서 동일한 형식으로 더 높은 답변을 형성하지 않습니다
Kris Boyd

6

document.getElementsByName 메서드는 요소 배열을 반환합니다. 예를 들어 먼저 선택해야합니다.

document.getElementsByName('acc')[0].value

4
그것은, 그것은 :-) NodeList를 배열의 아니에요
플로리안 Margaine

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.