[javascript] 자바스크립트 getElementsByName 배워보자!

오늘은 자바스크립트의 getElementsByName 함수에 대해서 정리해 보려고 한다. 이 함수는 HTML 문서 내에서 특정한 이름 (name)을 가진 모든 요소들을 가져오는 기능이며, 주로 폼(form) 요소나 일부 다른 요소들을 선택하는 데 활용된다. getElementById, getElementsByClassName 등의 함수들과 더불어 태그 속성값에 의해 호출하고 다룰 수 있는 함수다. 

---

getElementsByName 함수의 개념

getElementsByName 함수는 HTML 문서 내에서 특정한 이름(name)을 가진 모든 요소를 선택하는 자바스크립트 함수다. 이 함수는 문서 객체 모델(DOM)을 사용하여 문서 내의 요소들을 탐색하고 선택할 때 유용하게 활용된다.

함수의 선택 기준은 이름(name) 속성이 특정 값과 일치하는 모든 요소를 선택하며, 선택된 요소들을 배열 형태로 반환한다.
name 속성은 HTML 문서 내에서 고유할 필요가 없기 때문에 선택된 요소가 여러 개일 수 있다. 주로 HTML 폼(form) 요소에서 특정한 이름을 가진 필드를 선택하는 데에 사용된다.


기본 구문

var elements = document.getElementsByName(name);

'name'은 선택하고자 하는 요소의 이름(name) 속성 값이며, elements는 선택된 요소들을 포함한 배열 객체다.

함수의 특징

선택된 요소의 반환 형식
getElementsByName 함수는 선택된 모든 요소를 배열 형태로 반환하며, 이 배열에는 해당 이름을 가진 모든 요소가 포함된다. 따라서 선택된 요소에 접근하려면 배열의 인덱스를 사용하면 된다.

동일한 이름의 요소 선택
HTML 문서 내에서 동일한 이름(name)을 가진 여러 요소가 있을 수 있다. 이 경우에는 getElementsByName 함수는 해당 이름을 가진 모든 요소를 선택하게 된다. 예를 들어, 여러 체크박스가 동일한 이름을 가질 수 있다.

폼(form) 요소
getElementsByName 함수는 주로 HTML 폼(form) 요소에서 사용된다. 폼 요소에서는 사용자로부터 데이터를 수집하기 위해 일반적으로 이름이 지정된다. 따라서 이 함수는 특정 폼 필드를 선택하는 데 유용하다.

name 속성
getElementsByName 함수는 이름(name) 속성을 기준으로 요소를 선택한다. 따라서 선택하고자 하는 요소에는 반드시 name 속성이 있어야 한다.

HTMLCollection 반환
getElementsByName 함수는 선택된 요소들을 HTMLCollection 객체로 반환한다. 이는 NodeList와 유사하지만 일부 다른 특성을 가지게 된다. HTMLCollection은 실시간으로 업데이트되며, 동적으로 요소가 추가되거나 제거될 때마다 변경된다.


getElementsByName 함수의 이러한 특징들을 이해하고 사용한다면 더 다양한 상황에서 효과적으로 활용할 수 있다.

---

getElementsByName 함수의 활용 사례

getElementsByName 함수는 HTML 문서 내에서 특정한 이름(name)을 가진 요소들을 모두 선택하는 역할을 하며, 여러 가지 다양한 활용 사례가 있다.


폼 요소 선택하기
폼 요소들 중에서 특정한 이름을 가진 요소들을 선택하여 데이터를 처리할 때 사용된다. 예를 들어 로그인시에 사용자명과 비밀번호 가져오는 상황에서 값을 확인할 때 활용된다.

<form>
    <input type="text" name="username" placeholder="사용자명">
    <input type="password" name="password" placeholder="비밀번호">
    <button type="submit">로그인</button>
</form>

<script>
// 사용자명과 비밀번호 가져오기
const usernameField = document.getElementsByName('username')[0];
const passwordField = document.getElementsByName('password')[0];

// 사용자가 입력한 값을 확인하여 처리
function login() {
    const username = usernameField.value;
    const password = passwordField.value;
}
</script>

위의 코드에서 사용된 <input> 요소들은 각각 name 속성이 있으며, 이 속성은 getElementsByName 함수를 사용하여 해당 요소들을 선택하는 데 사용된다. 
getElementsByName 함수를 호출하여 폼 요소를 선택하고 있으며, 이 함수는 주어진 name 속성 값과 일치하는 모든 요소를 배열로 반환한다. 그러나 위의 코드에서는 username과 password 요소는 각각 하나씩만 존재하기 때문에 [0]을 사용하면 첫 번째 요소만 선택하여 가져오게 된다.

이렇게 선택된 요소는 각각 usernameField와 passwordField 변수에 할당되게 된다.

동적으로 생선된 요소 선택
자바스크립트를 사용하여 동적으로 생성된 요소들을 선택할 때 사용될 수 있다. 예를 들어, 사용자가 버튼을 클릭하면 새로운 폼 요소들을 동적으로 생성하고, 이를 선택하여 처리할 때 활용된다.

<button onclick="addInput()">입력 필드 추가</button>
<div id="container"></div>

<script>
// 동적으로 입력 필드 추가하기
function addInput() {
    const container = document.getElementById('container');
    const input = document.createElement('input');
    input.type = 'text';
    input.name = 'dynamicInput';
    container.appendChild(input);
}

// 추가된 동적 입력 필드 값 가져오기
function getDynamicInputValue() {
    const dynamicInputs = document.getElementsByName('dynamicInput');
    dynamicInputs.forEach(input => {
        console.log(input.value);
    });
}
</script>

위의 코드에서 버튼을 클릭하면 addInput() 함수가 호출되고, 이 함수는 동적으로 입력 필드를 추가하게 된다.
addInput() 함수는 document.createElement() 메서드를 사용하여 새로운 <input> 요소를 생성하고, 이를 동적으로 생성된 입력 필드로 만들기 위해 속성을 설정한다. 그런 다음 appendChild() 메서드를 사용하여 새로 생성된 입력 필드를 container 요소에 추가한다.

getDynamicInputValue() 함수는 getElementsByName 함수를 사용하여 이름이 dynamicInput인 모든 입력 필드를 가져오고, 그런 다음 forEach 문을 통해서 각 입력 필드의 값을 콘솔에 출력하게 된다.

일괄적인 조작
동일한 이름을 가진 여러 요소들을 한꺼번에 선택하여 일괄적으로 조작할 수 있다. 예를 들어, 이름이 동일한 여러 개의 체크박스를 선택하여 모두 체크하거나 해제할 때 사용될 수 있다.

<input type="checkbox" name="fruit" value="apple"> 사과
<input type="checkbox" name="fruit" value="banana"> 바나나
<input type="checkbox" name="fruit" value="orange"> 오렌지

<button onclick="checkAll()">전체 선택</button>
<button onclick="uncheckAll()">전체 해제</button>

<script>
// 전체 선택 함수
function checkAll() {
    const fruits = document.getElementsByName('fruit');
    fruits.forEach(fruit => {
        fruit.checked = true;
    });
}

// 전체 해제 함수
function uncheckAll() {
    const fruits = document.getElementsByName('fruit');
    fruits.forEach(fruit => {
        fruit.checked = false;
    });
}
</script>

위의 코드는 세 개의 체크박스에 각각 name 속성을 설정하고, 동일한 그룹으로 묶인 체크박스다. 두 개의 버튼은 각각 "전체 선택"과 "전체 해제" 기능이다.

checkAll() 함수는 getElementsByName 함수를 사용하여 이름이 fruit인 모든 체크박스 요소를 가져오고, forEach 문을 통해서 각 체크박스의 checked 속성을 true로 설정하여 모든 체크박스를 선택하게 된다.

unchechAll() 함수도 비슷하게 작동하며, getElementsByName 함수를 사용하여 모든 체크박스를 가져오고, 각 체크박스의 checked 속성을 false로 설정하여 모든 체크박스를 선택 해제한다.

문서 구조 탐색
문서 내에서 특정한 이름을 가진 요소들을 찾아서 탐색할 때 사용될 수 있다. 예를 들어, 요소의 이름을 기준으로 선택하므로 HTML 문서의 구조에 따라 필요한 요소들을 쉽게 선택할 수 있다.

<div id="container">
    <div name="section" class="section">섹션 1</div>
    <div name="section" class="section">섹션 2</div>
    <div name="section" class="section">섹션 3</div>
</div>

<script>
// 섹션 요소 가져오기
const sections = document.getElementsByName('section');
sections.forEach(section => {
    console.log(section.textContent);
});
</script>

위의 코드는 getElementsByName 함수를 사용하여 name 속성이 "section"인 모든 요소를 가져오고 있다. 그리고 forEach 문을 사용하여 각 섹션 요소의 텍스트 내용을 콘솔에 출력한다.

 

반응형

---

getElementsByName 함수의 예제 소스 코드

<script>
/**
    * window document load 실행
    */
window.addEventListener('DOMContentLoaded', () => {
    // div name
    const divNames = document.getElementsByName('div_name');
    // 버튼 name
    const buttonName = document.getElementsByName('button_name');
    // input name
    const inputName = document.getElementsByName('input_name');

    /**
     * button click 이벤트
     */
    buttonName[0].addEventListener('click', () => {
        let textContent = '';

        let divLength = divNames.length;
        for (let i = 0; i < divLength; i++) {
            if (i > 0) textContent += ', ';
            textContent += divNames[i].textContent;
        }
        inputName[0].innerHTML = textContent;
    });
});
</script>

<div name="div_name">name 01</div>
<div name="div_name">name 02</div>
<div name="div_name">name 03</div>
<div>
    <input type="button" name="button_name" value="click"/>
    <br>
    <span name="input_name"></span>
</div>

위의 소스 코드는 버튼을 클릭하면 div_name에 해당하는 요소들의 텍스트 내용을 가져와 하나의 문자열로 결합하고 그 문자열을 다시 화면에 출력하는 예제다.
html의 div 태그에 동일하게 name="div_name" 속성을 주었고, 그러면 세 개의 div는 getElementsByName 함수에 의해 리스트 형태로 한번에 호출이 가능하다.
다른 유사한 함수들과 마찬가지로 요소들을 리스트로 가져오기 때문에 for문을 통하여 컨트롤해주고 있다. 가끔 특정 요소만 변경을 해줘야 하는 경우에는
document.getElementsByName('div_name')[1].text = ‘test’;
이런 식으로 해당 요소의 인덱스 번호를 넣고 바로 컨트롤 해줘도 무방하다.

실행 결과

실행 결과에서 보는 것과 같이 버튼 click을 했을 경우 for문을 통해 요소들의 text 정보를 가져와 하단의 span 영역에 입력해 주는 예제로 결과는 정상적으로 출력하는 것을 확인할 수 있다.

---

getElementsByName 함수 사용 시 주의사항

getElementsByName 함수를 사용할 때의 주의사항이 몇가지 있다. 


동일한 이름의 요소
getElementsByName 함수는 지정된 이름을 가진 모든 요소를 가져오는데, 상황에 따라서 원하지 않은 요소까지 가져와 예기치 못한 이슈가 발생할 수 있다. 그렇기 때문에 getElementsByName을 사용할 때에는 동일한 요소가 같이 적용되어야 하는 요소가 맞는지 확인 후 적용하는 것이 좋다.

NodeList
getElementsByName 함수는 선택한 요소들을 NodeList 형태의 배열 객체로 반환하는데, 배열과 유사하지만 배열이 아니므로 배열 메서드를 직접 사용할 수 없다. NodeList를 배열로 사용하고자 한다면 Array.form이나 일반적인 반복문을 사용하여 요소를 활용해야 한다.

IE 호환성
getElementsByName 함수는 모든 브라우저에서 지원되지만, 특히 IE에서는 일부 제약이 있을 수 있다. 예를 들어, <input> 요소의 name 속성만 선택할 수 있으며, 다른 요소들에 대해서는 지원하지 않을 수 있다.

문서 전체 검색
getElementsByName 함수는 문서 전체에서 요소를 검색하는데, 문서가 크고 복잡할수록 이 함수를 호출하는 것은 성능에 영향을 줄 수 있다. 이러한 경우에는 더 효율적인 선택 방법을 고려하는 것이 좋다.


이러한 주의사항을 고려하여 getElementsByName 함수를 사용하는 것이 안전하며, 조금 더 효율적인 기능을 구현할 수 있다.

---

마무리

오늘은 자바스크립트의 getElementsByName 함수에 대해 정리해 봤다.
getElementsByClassName, getElementsByTagName
두 개의 함수와 매우 비슷하지만, 사용법이 비슷해서 아무거나 써도 크게 상관은 없지만 개발 환경과 상황에 따라 권장하는 함수가 간혹 있을 수 있어 차이점과 사용법을 알아 두는 것이 좋다.

그리고 getElementsByName 함수는 여러가지 제약이 되는 주의사항들이 있으니 반드시 이 부분을 고려하여 개발하는 것을 권장한다.