본문 바로가기
개발

JavaScript로 HTML 요소 존재 여부 확인하는 방법

by 농담곰이 2023. 5. 2.
반응형

자바스크립트에서 요소의 존재 여부를 확인하는 방법에는 여러 가지가 있습니다. 이 중에서 가장 일반적으로 사용되는 방법은 `document.getElementById()` 메서드를 사용하여 해당 ID를 가진 요소가 있는지 확인하는 것입니다.

```javascript
const element = document.getElementById('myElementId');
if (element) {
  // 요소가 존재하는 경우 실행할 코드
} else {
  // 요소가 존재하지 않는 경우 실행할 코드
}
```

위의 코드에서 `document.getElementById()` 메서드를 사용하여 ID가 "myElementId"인 요소를 가져옵니다. 만약 해당 ID를 가진 요소가 존재하면, `element` 변수에 요소의 참조값이 할당됩니다. 이후 `if (element)` 구문을 사용하여 `element` 변수가 `null`이 아니라면(요소가 존재한다면) 코드 블록 내의 코드를 실행합니다. 만약 해당 ID를 가진 요소가 존재하지 않으면, `element` 변수는 `null`이 됩니다. 이 경우 `else` 블록 내의 코드를 실행합니다.

또 다른 방법으로는 `document.querySelector()` 메서드를 사용하여 CSS 선택자를 사용하여 요소를 찾는 것입니다.


```javascript
const element = document.querySelector('#myElementId');
if (element) {
  // 요소가 존재하는 경우 실행할 코드
} else {
  // 요소가 존재하지 않는 경우 실행할 코드
}
```

위의 코드에서 `document.querySelector()` 메서드를 사용하여 `#myElementId` CSS 선택자를 사용하여 요소를 찾습니다. 이후 `if (element)` 구문을 사용하여 `element` 변수가 `null`이 아니라면(요소가 존재한다면) 코드 블록 내의 코드를 실행합니다. 만약 해당 CSS 선택자에 해당하는 요소가 존재하지 않으면, `element` 변수는 `null`이 됩니다. 이 경우 `else` 블록 내의 코드를 실행합니다.

반응형

댓글