[javascript] 자바스크립트 getElementById() 알아보자!

오늘은 자바스크립트의 기본 내장 함수인 getElementById()에 대해서 정리해보려고 한다. 이름에서도 알 수 있듯이 document 요소의 id를 기준으로 조회하고 다룰 수 있는 함수다.
class를 다루는 getElementsByClassName, 태그 명을 다루는 getElementsByTagName, name을 다루는 getElementsByName 등과 같이 유사한 함수들이 있지만 조회 대상과 사용법은 조금씩 다르다는 차이점이 있다.

getElementById의 특징과 사용 방법 등을 정리하고, 다른 함수들과는 어떤 차이가 있는지도 확인해 보도록 하자.

---

getElementsById()

getElementsById() 함수는 자바스크립트의 DOM 요소를 다루는 메서드 중 하나로, HTML 문서 내에서 특정 id 값을 가진 요소를 선택하는 함수다. 해당 함수는 다중 선택이 아닌 단일 요소를 찾아 반환한다는 특징이 있다.

DOM (Document Object Model)
DOM이란 HTML, XML 등과 같은 문서에서 계층 구조로 표현하여 자바스크립트와 같은 스크립트나 프로그래밍 언어에서 문서의 내용, 구조 및 스타일에 접근하고 조작할 수 있도록 도와주는 인터페이스다. HTML 문서의 모든 요소는 DOM 노드로 표현되며, 이러한 노드들은 트리 구조로 구성된다.


기본 문법

const element = document.getElementById('id');

getElementById() 함수의 기본 사용 방법은 위와 같으며, 매개변수로 선택되는 값 'id'가 지정된 특정 요소의 id 값이다.
getElementById() 함수를 사용할 때에는 HTML 문서 내에서 id값은 고유해야하며, 동일한 id를 가진 요소가 두 개 이상인 경우에는 조회된 id 요소들 중 첫 번째로 발견된 요소만 반환하게 된다. 

요소의 id가 동일한 경우

<div id="sameId">요소 1</div>
<div id="sameId">요소 2</div>
<div id="sameId">요소 3</div>
<script>
const element = document.getElementById('sameId');
</script>

위와 같은 상황에서는 첫 번째 '요소 1'에 해당하는 요소만 조회되는 구조다. 그렇기 때문에 id를 사용하여 해당 함수를 사용할 때에는 반드시 유의해서 사용해야 한다. 그렇지 않으면 기능의 에러가 발생할 수 있으며, 웹 서비스의 품질이 저하될 수 있다.

---

getElementById() 함수의 예제 소스 코드

<script>
/**
    * window document load 실행
    */
window.addEventListener('DOMContentLoaded', () => {
    // div ID
    const divId = document.getElementById('divId');
    // 버튼 ID
    const buttonId = document.getElementById('buttonId');
    // input ID
    const inputId = document.getElementById('inputId');

    /**
     * window document load 실행
     */
    buttonId.addEventListener('click', () => {
        inputId.value = divId.textContent;
    });
});
</script>

<div id="divId">DIV ID - 1</div>
<div id="divId">DIV ID - 2</div>
<div>
    <input type="button" id="buttonId" value="click"/>
    <input type="text" id="inputId"/>
</div>

위의 코드는 getElementById() 함수를 사용하여 DOM 요소를 조작하는 간단한 예제다. 

const divId = document.getElementById('divId')
getElementById() 함수를 사용하여 id가 'divId'인 첫 번째 div 요소를 선택하며, 해당 요소는 divId 변수로 할당된다.

const buttonId = document.getElementById('buttonId')
getElementById() 함수를 사용하여 버튼 요소에 해당하는 'buttonId'를 선택하며, 해당 요소는 buttonId 변수로 할당한다.

const inputId = document.getElementById('inputId')
getElementById() 함수를 사용하여 입력값을 받기 위한 'inputId' 요소를 선택하며, 해당 요소는 inputId 변수로 할당한다.

buttonId 버튼 요소에 클릭 이벤트 리스너를 등록하며, 해당 버튼을 클릭하게 되면 이벤트 핸들러 함수가 실행된다.
클릭 이벤트 함수 내에서는 inputId.value = divId.textContext 구문을 통해 divId 요소의 텍스트 내용을 inputId의 value 값으로 할당한다.

이렇게 getElementById() 함수를 사용한 간단한 코드고, 요소별로 id 값은 중복되지 않고 고유한 값을 설정하였다.

실행 결과

예제 소스 코드에서는 div, input button, input text 모두 getElementById 함수를 이용하여 조회 후 요소를 다루고 있다.
위의 결과를 보는 것과 같이 중복된 id가 있는 경우에는 조회할 id 중 제일 먼저 조회된 1번의 div 정보를 가져오게 된다.

---

getElementById 요소의 존재 유무 확인

getElementById를 사용하여 요소를 선택 후 처리를 할 때 반환된 값이 null인지 값이 있는지 확인하는 것이 중요하다. 만약 반환된 값이 null이라면 에러가 발생할 수 있다.


null 미확인

const element = document.getElementById('id');

element.textContent = '요소 선택';

위의 코드와 같이 getElementById로 id 선택 후 textContent 값을 설정하려고 할 때 element 변수가 null이라면 에러가 발생하게 된다.

Uncaught TypeError: Cannot set property 'textContent' of null

위와 같은 에러가 발생하게 되며, 기능의 이슈가 될 수 있다. 그렇기 때문에 getElementById 함수를 사용하고자 한다면 반드시 null 처리를 해주는 것이 좋다.


null 확인

const element = document.getElementById('id');

// 요소가 존재하지 않음
if (element === null) {
    console.log('id 요소가 존재하지 않습니다.');

// 요소가 존재함
} else {
    console.log('id 요소가 존재합니다.');
}

위와 같이 getElementById 함수를 통해 값 할당 후 null 체크를 하는 조건문을 추가하여 문제가 되지 않도록 처리를 해준다면 오류가 발생하지 않고 대처가 가능하다.

---

유사한 함수들과의 비교

처음 설명한 바와 같이 getElementById() 함수는 유사한 함수들이 존재한다. 기능은 매우 유사하지만 조회되는 대상과 다루는 방식이 조금 다르기 때문에 각 함수별로 사용법과 차이점을 비교해 보는 것이 좋다.

차이점
document의 id값을 기준으로 조회하는 getElementById 함수는 다른 조회 함수와는 다르게 고유한 id값 하나만 조회를 한다는 것과 함수 명칭에 s자가 붙지 않는다는 차이점이 있다.

- getElementById
- getElementsByName
- getElementsByTagName
- getElementsByClassName

추가로 querySelector와 비교를 하면
querySelector는 id, class, tagname, name 등 전체적으로 조회를 하기 때문에 id는 앞에 ‘#’을 붙여주고, class는 ‘.’를 붙여줘야 하는 차이점이 있다.

- querySelector id 조회 -> ‘#divId’
- querySelector class 조회 -> ’. div_class’
- getElementById 조회 -> ‘divId’
- getElementsByClassName -> ‘div_class’

querySelector 함수는 어떤 DOM 객체를 어떤 값으로 조회할지 모르기 때문에 앞에 #,. 구분값을 넣어 구분을 하게 되고, getElementById는 id값만을 조회하기 때문에 구분자 없이 id값만 넣어주면 된다는 차이가 있다.

---

getElementById() 함수 사용 시 주의사항

getElementById() 함수를 사용하기 전에 함수 사용 시 주의해야 할 사항들이 몇가지 있다.

고유 식별자 사용
위에서도 계속 강조한 바와 같이 문서 내에서 id는 고유해야 하며, 동일한 id를 가진 여러 요소를 선택하려고 하면 예기치 않은 동작이 발생할 수 있다. 그렇기 때문에 각 요소에 대한 고유한 id를 부여해야 한다. (id값을 너무 짧고 심플하게 짓지 않고, 조금 복잡하게 지어주는 것이 좋다)

요소의 존재 확인
getElementById로 요소를 선택하기 전에 해당 id를 가진 요소가 문서에 실제로 존재하는지 확인하는 것이 중요하다. 존재하지 않는 id를 사용하여 getElementById를 호출하면 null이 반환되기 때문에 에러가 발생할 수 있다.

DOM 로드
페이지의 DOM 요소가 완전히 로드된 후에 getElementById가 실행되도록 해야 한다. 그렇지 않으면 요소가 생성되기도 전에 호출되므로 예기치 못한 에러가 발생할 수 있다.

성능
getElementById 함수는 id를 사용하여 요소를 찾기 때문에 매우 빠르다. 그러나 동일한 작업을 여러 번 수행하는 경우에는 getElementById를 반복해서 호출하는 것보다 선택한 요소를 변수에 저장하고 재사용하는 것이 성능상 유리하다.

접근성
id를 사용하여 요소를 선택할 때, 해당 요소가 웹 접근성이 지침을 준수하는지 확인해야 한다. 모든 사용자가 해당 요소를 적절하게 이해하고 사용할 수 있도록 적절한 레이블링과 명료한 텍스트를 제공해야 한다.

---

마무리

오늘은 자바스크립트의 내장 함수인 getElementById()에 대해서 정리해 보았다. 다른 유사한 함수들과 비교를 하면서 정리해 봤는데, 특정 id 하나만 조회한다는 특징이 있었고, 고유한 id를 기준으로 하나만 조회하기 때문에 속도가 매우 빠르다는 것을 알 수 있었다. 그러나 이 부분을 너무 신뢰하고 중구난방으로 사용하게 된다면 오히려 성능에 이슈가 될 수 있다는 점도 알 수 있었다. getElementById() 함수를 사용하려면 반드시 최상단에서 값 할당을 먼저 하고 처리가 되도록 하는 것이 좋다. 그리고 null 값이 반환될 수 있으니 반드시 null 처리도 함께 해준다면 웹 서비스의 품질도 많이 향상될 것이다.

 

* querySelector

https://sancode.tistory.com/15

[javascript] querySelector 배우기