jQuery / Method / .get() - 선택한 요소를 배열로 가져오는 메서드

jQuery의 .get(index)는 선택한 집합에서 DOM(Document Object Model, 문서 객체 모델) 요소 하나를 꺼내고, 인수 없는 .get()은 모든 요소를 일반 JavaScript 배열로 반환합니다. 결과는 jQuery 객체가 아니므로 이어서 쓸 수 있는 메서드가 달라집니다. 인덱스는 0부터 시작하며 음수는 끝에서부터 셉니다.

get·eq·배열 접근의 반환값 구분

.get() 공식 문서의 두 형식을 구분하면 네이티브 DOM API와 jQuery 메서드를 섞어 쓰면서 생기는 오류를 줄일 수 있습니다. 요소 하나의 classList나 textContent가 필요하면 .get(0)으로 꺼냅니다. 반면 .addClass()나 .text()를 계속 연결하려면 .eq(0)으로 jQuery 객체를 유지합니다.

인덱스는 부모 안에서의 몇 번째 자식인지가 아니라 현재 jQuery 집합 안의 위치입니다. 요소가 3개이면 0·1·2가 유효하며 -1은 마지막, -3은 첫 요소입니다. 3이나 -4는 범위 밖입니다. 대괄호의 [-1]에는 .get(-1)처럼 끝에서 세는 기능이 없습니다.

요소 하나와 전체 배열을 확인하는 실습

전체 코드를 UTF-8의 get-demo.html로 저장한 뒤 브라우저에서 엽니다. 공식 jQuery 파일 4.0.0을 CDN(Content Delivery Network, 콘텐츠 전송 네트워크)에서 읽을 인터넷 연결이 필요하며 별도 설치는 없습니다. 선택·추가·빈 목록·초기화와 아래 배열 비교를 3.7.1과 4.0.0에서 실행했습니다.

이 예제는 .get(index)로 얻은 요소에 네이티브 classList.add()를 적용해 배경을 강조합니다. .get()으로 받은 배열에는 JavaScript의 map()을 적용해 각 노드의 textContent를 모읍니다. 결과 출력에는 HTML을 삽입하지 않고 .text()를 사용합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read DOM elements with get</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select { font: inherit; margin: 4px; }
    .picked { background: #d9f4ef; font-weight: bold; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Read a DOM element or an array</h1>
  <label for="index">Index:</label>
  <select id="index"><option>0</option><option>1</option><option>-1</option><option>9</option></select>
  <button type="button" id="read">Read</button>
  <button type="button" id="add">Add Delta</button>
  <button type="button" id="empty">Empty list</button>
  <button type="button" id="reset">Reset</button>
  <ul id="items"><li>Alpha</li><li>Beta</li><li>Gamma</li></ul>
  <pre id="result" aria-live="polite"></pre>
  <script>
    $(function () {
      const initial = "<li>Alpha</li><li>Beta</li><li>Gamma</li>";
      function read() {
        const $items = $("#items > li");
        const index = Number($("#index").val());
        const element = $items.get(index);
        const elements = $items.get();
        $items.removeClass("picked");
        if (element !== undefined) element.classList.add("picked");
        const label = element === undefined ? "undefined" : element.textContent;
        const labels = elements.map(node => node.textContent).join(", ");
        $("#result").text(`get(${index})=${label}\narray=${labels}\ncount=${elements.length}`);
      }
      $("#read, #index").on("click change", read);
      $("#add").on("click", function () {
        if (!$("#items > li").filter(function () { return this.textContent === "Delta"; }).length) {
          $("<li>").text("Delta").appendTo("#items");
        }
        read();
      });
      $("#empty").on("click", function () { $("#items").empty(); read(); });
      $("#reset").on("click", function () {
        $("#items").html(initial);
        $("#index").val("0");
        read();
      });
      read();
    });
  </script>
</body>
</html>

초기에는 첫 항목 Alpha가 강조됩니다.

get(0)=Alpha
array=Alpha, Beta, Gamma
count=3

1. Index를 1로 바꾸면 Beta가 강조됩니다. 1은 두 번째 요소의 인덱스입니다.
2. -1로 바꾸면 Gamma를 선택합니다.
3. 그 상태에서 Add Delta를 누르면 count는 4, 마지막 요소는 Delta가 됩니다. 버튼을 다시 눌러도 Delta는 중복 추가되지 않습니다.
4. 9를 선택하면 첫 줄은 get(9)=undefined이고 강조 항목이 없습니다. 전체 배열과 개수는 계속 표시됩니다.
5. Empty list를 누르면 count는 0이고 array= 뒤가 비어 있습니다. -1이나 0을 골라도 요소가 없으므로 undefined입니다.
6. Reset은 목록 세 항목과 인덱스 0을 복원합니다. Read는 현재 조건으로 결과를 다시 읽습니다.

read()는 실행할 때마다 목록을 새로 선택하므로 추가된 Delta도 반영합니다. 이전에 선택해 보관한 jQuery 집합이나 배열의 항목 수가 문서 변경을 따라 자동 증가한다고 가정하지 않습니다.

배열을 바꾸는 것과 노드를 바꾸는 것

.get()은 배열을 만들어 주지만 DOM 노드를 복제하지는 않습니다. 개발자 도구의 Console에서 다음 완전한 부분 코드를 실행합니다. 문서에 삽입하지 않은 임시 요소 두 개를 사용하며 마지막 줄에서 정리합니다.

const $items = $("<li>One</li><li>Two</li>");
const elements = $items.get();
elements.reverse();
elements[0].textContent = "Changed";
console.log(`array=${elements.map(node => node.textContent).join(",")}`);
console.log(`jQuery=${$items.get().map(node => node.textContent).join(",")}`);
console.log(`same node=${elements[0] === $items.get(1)}`);
console.log(`get(9)=${typeof $items.get(9)} | eq(9).length=${$items.eq(9).length}`);
console.log(`get(-1)=${$items.get(-1).textContent} | bracket[-1]=${typeof $items[-1]}`);
$items.remove();

array=Changed,One
jQuery=One,Changed
same node=true
get(9)=undefined | eq(9).length=0
get(-1)=Changed | bracket[-1]=undefined

reverse()는 반환 배열의 순서만 뒤집습니다. 원래 jQuery 집합은 여전히 One을 먼저 가집니다. 그러나 배열의 첫 요소는 원래 집합의 두 번째 노드와 같은 객체입니다. 그 textContent를 Changed로 바꾸면 원래 집합에서 읽은 값도 바뀝니다. 별도 배열과 별도 노드 복사는 구분해야 합니다. 전체 요소를 배열로 바꾸는 목적은 .toArray()로도 표현할 수 있습니다.

없는 요소와 메서드 혼동 처리하기

범위 밖에서 얻은 undefined의 .classList나 .textContent를 읽으면 오류가 납니다. 실습처럼 요소가 undefined인지 먼저 검사한 뒤 네이티브 API를 호출합니다. .get(0).addClass()도 DOM 요소에 jQuery 메서드를 호출하므로 맞지 않습니다. .eq(0).addClass()로 계속 작업하거나, 꺼낸 요소를 $(element)로 감싸 사용합니다.

.get()은 jQuery 객체에서 DOM 요소를 꺼내며 네트워크 요청을 하지 않습니다. HTTP 요청에 사용하는 $.get(url)과 이름은 비슷해도 역할과 호출 대상이 다릅니다. 의도한 값이 나오지 않으면 선택자의 범위, 현재 집합의 length, 0부터 세는 인덱스, 동적으로 바뀐 문서를 다시 선택했는지를 차례로 확인합니다.