DOM의 특정 요소 찾기

자바스크립트에서 DOM(Document Object Model, 문서 객체 모델)의 특정 요소를 찾는 함수들에 대해 알아보겠습니다.
이 함수들은 DOM에서 특정 요소를 매개변수로 직접적으로 검색하는 방식입니다.

다섯 가지 주요 함수

DOM의 특정 요소를 찾는 다섯 가지 주요 함수
getElementById() id 속성의 값으로 요소 찾기
getElementsByTagName() 태그 이름과 일치하는 모든 요소 찾기
getElementsByClassName() 클래스 이름과 일치하는 모든 요소 찾기
querySelector() CSS 선택자와 일치하는 첫 번째 요소 찾기
querySelectorAll() CSS 선택자와 일치하는 모든 요소 찾기

getElementById()

getElementById() 함수는
HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성의 값을 가진 요소 객체를 반환합니다.
일치하는 요소가 없으면 null을 반환합니다.

id 속성의 값은 HTML에서 고유하고 유일해야 하기 때문에 이 함수를 사용해서 요소를 빠르게 찾을 때 유용합니다.

구문
JavaScript 
document.getElementById(id);
매개변수
getElementById() 함수의 매개변수
id 찾으려는 요소의 id 속성의 값입니다. 이 값은 대소문자를 구분하는 문자열입니다.
반환 값
  • HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.
  • 일치하는 요소가 없으면 null을 반환합니다.

HTML에서 id 속성의 값은 고유하고 유일해야 하지만,
동일한 id 속성의 값을 두 개 이상 가진 요소가 존재하면 DOM 트리 순서로 첫 번째 요소 객체만 반환합니다. 에러는 발생하지 않습니다.

예제
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>getElementById() 예제</title>
    </head>
    <body>
        <p id="hello">환영합니다. 반갑습니다!</p>
        <script>
            const changeColor = newColor => {
                const ele = document.getElementById("hello");
                ele.style.color = newColor;
            }
        </script>
        <button type="button" onclick="changeColor('red');">빨간색으로 변신</button>
        <button type="button" onclick="changeColor('blue');">파란색으로 변신</button>
    </body>
</html>
자바스크립트 화살표 함수
실제 적용된 모습 버튼을 클릭해 보세요!

더 자세한 내용과 예제는 자바스크립트 getElementById() 함수 사용법을 참조하세요.

getElementsByTagName()

getElementsByTagName() 함수는
주어진 요소의 태그 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

반환되는 HTMLCollection 객체를 순회해서 각 요소에 대해 특정 작업을 수행할 수 있습니다.

HTMLCollection은
웹 페이지의 HTML 문서 내에서 선택한 요소만을 문서 내 정렬된 순서대로 모아둔 집합입니다.
흔히 DOM 컬렉션이라 말하는 이 집합은 요소를 배열의 항목처럼 유사하게 다룰 수 있으며, 웹 페이지의 요소를 쉽게 조작할 수 있게 하는 객체입니다.

자바스크립트 HTMLCollection

HTMLCollection은 유사 배열 객체이면서, for...of 문으로 순회 가능한 이터러블(iterable) 객체입니다.
그리고, DOM의 변경 사항을 실시간(또는 live)으로 반영하는 객체입니다.
length 속성으로 유사 배열 객체인 HTMLCollection의 길이를 반환할 수 있습니다.

구문
JavaScript 
// HTML 문서 전체에서
document.getElementsByTagName(name)

// 특정 요소 내에서
element.getElementsByTagName(name)
매개변수
getElementsByTagName() 함수의 매개변수
name 찾으려는 요소의 태그 이름에 해당하는 모든 요소입니다. 이 값은 대소문자를 구분하지 않는 문자열입니다.
특수문자 "*"는 모든 요소를 나타냅니다.
반환 값
  • HTML 문서 내에서 주어진 요소의 태그 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
  • 일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.
예제
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName()</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="tag-name.js"></script>
    </body>
</html>
tag-name.js 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

getElementsByTagName() 함수가 반환하는 HTMLCollection은 배열이 아니기 때문에 forEach() 함수를 바로 사용할 수 없습니다. HTMLCollection은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from() 또는 스프레드(...) 문법을 사용해 배열로 변환하면 forEach()를 사용할 수 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

코드 부연설명
for 문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

더 자세한 내용과 예제는 자바스크립트 getElementsByTagName() 함수 사용법을 참조하세요.

getElementsByClassName()

getElementsByClassName() 함수는
주어진 요소의 클래스 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.

구문
JavaScript 
// HTML 문서 전체에서
document.getElementsByClassName(names)

// 특정 요소 내에서
element.getElementsByClassName(names)
매개변수
getElementsByClassName() 함수의 매개변수
names 찾으려는 클래스 이름에 해당하는 모든 요소입니다. 이 값은 대소문자를 구분하는 문자열입니다.
여러 클래스 이름은 공백으로 구분됩니다.
반환 값
  • HTML 문서 내에서 주어진 클래스 이름에 해당하는 모든 요소를 HTMLCollection 객체로 반환합니다.
  • 일치하는 요소가 없으면 빈 HTMLCollection 객체를 반환합니다.
예제
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName()</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script src="class-name.js"></script>
    </body>
</html>
class-name.js 
const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

getElementsByClassName() 함수가 반환하는 HTMLCollection은 배열이 아니기 때문에 forEach() 함수를 바로 사용할 수 없습니다. HTMLCollection은 배열과 유사하지만, 실제 배열이 아니므로 배열 메서드를 지원하지 않습니다. 하지만, Array.from() 또는 스프레드(...) 문법을 사용해 배열로 변환하면 forEach()를 사용할 수 있습니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 함수입니다.

코드 부연설명
for 문은 특정 횟수나 범위만큼 반복하는 문입니다.

코드 부연설명
textContent 속성은 HTML 요소의 텍스트 콘텐츠를 가져오거나 설정합니다.

더 자세한 내용과 예제는 자바스크립트 getElementsByClassName() 함수 사용법을 참조하세요.

querySelector()

querySelector() 함수는
HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
일치하는 요소가 없으면 null을 반환합니다.

주의하세요!
지정한 선택자와 일치하는 모든 요소의 목록이 필요한 경우 querySelectorAll() 함수를 대신 사용해야 합니다.

구문
JavaScript 
// HTML 문서 전체에서
document.querySelector(selectors)

// 특정한 요소 객체 내에서
element.querySelector(selectors)
매개변수
querySelector() 함수의 매개변수
selectors 문자열 형식의 유효한 CSS 선택자입니다.
반환 값
  • HTML 문서나 특정한 요소 객체 내에서 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.
  • 일치하는 요소가 없으면 null을 반환합니다.
예제
JavaScript 
// HTML: <button id="myButton">클릭하세요</button>
const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

더 자세한 내용과 예제는 자바스크립트 querySelector() 함수 사용법을 참조하세요.

querySelectorAll()

querySelectorAll() 함수는
HTML 문서나 특정한 요소 내에서 지정한 CSS 선택자와 일치하는 모든 요소를 반환합니다.

  • HTML 문서나 특정한 요소 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환합니다.
  • 이 목록은 유사 배열입니다. 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
  • 그리고, 이 목록은 정적이며 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않습니다.
  • 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환합니다.
구문
JavaScript 
// HTML 문서 전체에서
document.querySelectorAll(selectors)

// 특정 요소 내에서
element.querySelectorAll(selectors)
매개변수
querySelectorAll() 함수의 매개변수
selectors 문자열 형식의 유효한 CSS 선택자입니다.
매개변수
  • HTML 문서나 특정한 요소 객체 내에서 CSS 선택자와 일치하는 모든 요소를 NodeList 객체의 목록으로 반환
    (이 목록은 정적이며 DOM의 변경 사항을 실시간(또는 live)으로 반영하지 않음)
  • 일치하는 요소가 없으면 비어있는 NodeList 객체를 반환
예제
HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>querySelectorAll() 함수</title>     
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>
Javascript - queryselectorall.js 
const liElements = document.querySelectorAll("li");  // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

/*
 * 이 목록은 유사 배열입니다.
 * 이 목록의 요소는 순회를 통해서 특정 작업을 수행할 수 있습니다.
*/

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    김밥
    라면
    떡볶이
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    console.log(liElements[i].textContent);
}
/*
    김밥
    라면
    떡볶이
*/

/* 방법 3 - forEach() 함수 적용 */
liElements.forEach(li => { // 유사 배열이지만 forEach() 함수 적용이 가능
    console.log(li.textContent);
});
/*
    김밥
    라면
    떡볶이
*/

querySelectorAll() 함수로 반환하는 NodeList 객체는 유사 배열 형태를 가집니다.
NodeList 객체는 배열과 유사하게 요소에 인덱스를 사용하여 접근할 수 있고, length 속성을 통해 요소의 수를 확인할 수 있습니다. 그러나 NodeList 객체는 진짜 자바스크립트 배열이 아니라 유사 배열(iterable) 객체입니다.

NodeList 객체는 배열과 유사하게 다룰 수 있지만, 진짜 배열처럼 배열 메서드(push(), pop() 등)를 사용할 수는 없습니다.

그러나, 유사 배열임에도 불구하고 배열을 순회할 때 사용하는 forEach() 함수는 사용할 수 있습니다.

더 자세한 내용과 예제는 자바스크립트 querySelectorAll() 함수 사용법을 참조하세요.

브라우저 호환성

DOM의 특정 요소를 찾는 다섯 가지 주요 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
getElementById() 1 12 1 1
getElementsByTagName() 1 12 1 1
getElementsByClassName() 1 12 3 3.1
querySelector() 1 12 3.5 3.1
querySelectorAll() 1 12 3.5 3.1

같이 보기