자바스크립트 HTML name 이름으로 요소 정보 취득 getElementsByName

Document 오브젝트의 getElementsByName 메서드를 사용해 name 이름으로 요소에 접근하는 방법을 알아보겠습니다.

getElementsByName 작성 방법을 먼저 보겠습니다.

document.getElementsByName(name 이름)

파라미터로 name 이름을 지정합니다.

샘플 코드를 보면서 사용 방법을 확인해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>getElementsByName</title>
</head>
<body>

<p>취미 선택</p>

<label><input type="radio" name="hobby" value="운동">운동</label>
<label><input type="radio" name="hobby" value="음악" checked>음악</label>
<label><input type="radio" name="hobby" value="여행">여행</label>

<button onClick="getElements();">요소 취득</button>

<script>
function getElements(){
    let elements = document.getElementsByName('hobby');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        if (elements.item(i).checked){
            alert(elements.item(i).value + ' 선택');
        }else{
            alert(elements.item(i).value + ' 선택 안함');
        }
    }
}
</script>
</body>
</html>

요소 취득 버튼을 누르면 name 이름이 hobby 요소를 모두 취득합니다.

샘플 소스에서는 라디오 버튼 name에 hobby로 지정했습니다.

모든 라디오 버튼을 취득해 선책한 라디오 버튼이 어떤것인지 체크를 하고 있습니다.

getElementsByName을 사용해 name 이름으로 요소를 취득하는 방법을 알아봤습니다.