수정하기 - 삼항 연산자를 사용하여 DOM 요소를 선택하는 방법은 무엇인가요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

삼항 연산자는 JavaScript에서 조건에 따라 두 가지 값 중 하나를 선택하는 데 사용되는 간단한 방법입니다. DOM 요소를 선택할 때도 이 연산자를 활용할 수 있습니다. 삼항 연산자는 다음과 같은 형식을 가집니다:    ```javascript  condition ? valueIfTrue : valueIfFalse;  ```    이 구조를 사용하여 DOM 요소를 선택하는 방법을 살펴보겠습니다.           기본적인 DOM 요소 선택    DOM 요소를 선택하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 `document.getElementById`, `document.querySelector`, `document.getElementsByClassName` 등을 사용하는 것입니다. 예를 들어, 특정 ID를 가진 요소를 선택하고 싶다면 다음과 같이 할 수 있습니다:    ```javascript  const element = document.getElementById('myElement');  ```           삼항 연산자를 활용한 DOM 요소 선택    삼항 연산자를 사용하면 조건에 따라 다른 DOM 요소를 선택할 수 있습니다. 예를 들어, 특정 조건에 따라 두 개의 서로 다른 요소 중 하나를 선택하고 싶다고 가정해 보겠습니다. 아래의 예시는 `isLoggedIn`이라는 변수를 사용하여 로그인 상태에 따라 다른 요소를 선택하는 방법을 보여줍니다.    ```javascript  const isLoggedIn = true; // 로그인 상태를 나타내는 변수  const userElement = isLoggedIn ? document.getElementById('userProfile') : document.getElementById('loginPrompt');  ```    위 코드에서 `isLoggedIn`이 `true`일 경우 `userProfile` ID를 가진 요소를 선택하고, `false`일 경우 `loginPrompt` ID를 가진 요소를 선택합니다.           예제: <a href='https://sangseek.com/sangseeks/버튼 클릭/ko'>버튼 클릭</a> 시 요소 선택    좀 더 실용적인 예제를 살펴보겠습니다. 버튼 클릭 시 사용자가 로그인 상태인지 아닌지에 따라 다른 메시지를 표시하는 경우입니다.    ```html  <button id="toggleLogin">Toggle Login</button>  <div id="userProfile" style="display: none;">Welcome, User!</div>  <div id="loginPrompt" style="display: none;">Please log in.</div>  ```    ```javascript  let isLoggedIn = false;    document.getElementById('toggleLogin').addEventListener('click', () => {      isLoggedIn = !isLoggedIn; // 로그인 상태 토글        const messageElement = isLoggedIn ? document.getElementById('userProfile') : document.getElementById('loginPrompt');        // 모든 메시지 숨기기      document.getElementById('userProfile').style.display = 'none';      document.getElementById('loginPrompt').style.display = 'none';        // 선택된 메시지 표시      messageElement.style.display = 'block';  });  ```    위의 코드에서 버튼을 클릭할 때마다 `isLoggedIn` 상태가 토글되고, 삼항 연산자를 사용하여 적절한 메시지를 선택하여 표시합니다. 이처럼 삼항 연산자는 조건에 따라 간결하게 DOM 요소를 선택하는 데 유용하게 사용될 수 있습니다.           결론    삼항 연산자는 JavaScript에서 조건부 로직을 간단하게 구현할 수 있는 유용한 도구입니다. DOM 요소를 선택할 때도 이 연산자를 활용하면 코드의 <a href='https://sangseek.com/sangseeks/가독성/ko'>가독성</a>을 높이고, 조건에 따라 동적으로 요소를 선택하는 데 도움을 줄 수 있습니다. 다양한 상황에서 삼항 연산자를 적절히 활용하여 효율적인 코드를 작성해 보세요.