JavaScript의 DOM에 요소가 있는지 확인

일치하는 요소가 있는지 확인하려면 요소를 식별하는 방식에 맞는 조회 메서드를 사용합니다. document.getElementById()는 일치하는 요소 또는 null을 반환하므로, 반환값이 참인지 확인하면 됩니다. 클래스와 태그 조회는 컬렉션을 반환하므로 length를 확인해야 합니다. 빈 컬렉션도 참으로 평가되기 때문입니다.

getElementById()로 일치하는 요소 하나 찾기

요소의 고유한 id를 알고 있다면 getElementById()를 사용합니다. ID가 일치하면 Element 하나를 반환하고, 해당 ID를 가진 요소가 없으면 null을 반환합니다. ID 앞에 #을 붙이지 않습니다.

다음 브라우저 페이지 예제는 ID가 help-link인 링크를 찾습니다. 코드에 표시되는 링크 문구는 영어로 유지됩니다.

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

exists 변수의 값은 불리언입니다. Boolean(helpLink) 또는 !!helpLink를 사용해 반환값을 true나 false로 바꿀 수도 있습니다. 조회 메서드의 반환 형식을 명확히 드러내려면 !== null을 사용하세요.

클래스, 이름, 태그로 일치하는 요소 찾기

클래스를 기준으로 찾을 때는 getElementsByClassName(), name 속성을 기준으로 찾을 때는 getElementsByName(), 요소 태그를 기준으로 찾을 때는 getElementsByTagName()를 사용합니다. 각 메서드는 서로 다른 속성을 기준으로 검색합니다. 예를 들어 클래스 값은 class에, 폼 컨트롤의 이름은 name에 지정합니다.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName()와 getElementsByTagName()는 실시간 HTMLCollection 객체를 반환합니다. getElementsByName()는 NodeList를 반환합니다. 일치하는 항목이 없으면 컬렉션의 길이는 0이지만, 여전히 null이 아닌 객체입니다. 일치 항목이 있는지 확인하려면 collection.length > 0 또는 collection.length !== 0을 사용하세요.

조회 결과와 불리언 확인 방법 이해하기

요소 하나를 반환하는 조회와 컬렉션을 반환하는 조회에는 서로 다른 존재 확인 방법이 필요합니다. getElementById()의 결과는 Boolean(element)로 변환하거나 null과 비교하세요. 클래스, 이름 또는 태그 조회에서 반환된 컬렉션은 length를 확인해야 합니다. 컬렉션에 바로 !!를 적용해도 요소가 들어 있는지 알 수 없습니다. 빈 컬렉션과 항목이 있는 컬렉션 모두 참으로 평가됩니다.

질문이 “이 ID를 가진 요소가 하나 있는가?”인지, “이 조건과 일치하는 요소가 몇 개인가?”인지에 따라 API를 선택하세요. 조회한 요소를 나중에 사용해야 한다면 너무 일찍 불리언으로 바꾸지 말고 요소나 컬렉션을 그대로 보관하세요.

다음 예제를 실행해 보세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

이 예제는 컬렉션의 길이로 일치 항목이 있는지 확인하는 방법을 단독으로 보여 줍니다. 앞의 DOM 관련 코드 조각은 브라우저 페이지용 소스이며 여기서 실행하는 코드는 아닙니다.

노드가 document.body 안에 있는지 확인하기

document.body.contains(node)는 node가 body 자체이거나 그 하위 노드인지 나타내는 불리언을 반환합니다. DOM 트리에 포함되어 있는지를 확인하며, 노드가 화면에 보이는지는 확인하지 않습니다. 노드가 body 안에 있더라도 CSS로 숨겨져 있거나 다른 이유로 표시되지 않을 수 있습니다.

contains()에는 노드 하나를 전달합니다. 조회 결과가 컬렉션이라면 먼저 항목 하나를 선택하고, 컬렉션이 비어 있을 가능성도 처리하세요. 예를 들어 const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]);는 첫 번째 일치 노드만 확인하며 모든 일치 항목을 검사하지는 않습니다. 실제로 확인하려는 것이 일치하는 노드 중 하나라도 body에 포함되어 있는지라면 각 항목을 하나씩 검사하세요.