Leeyanggoo
[JS] 퀴즈 이펙트 만들기1!! 자바스크립트 선택자 알아보기 본문
codepen design by David López
자바스크립트 선택자란?
선택자란 웹 페이지의 특정 요소를 선택하고 다양한 작업을 수행하기 위해 사용합니다.
자바스크립트의 선택자는 HTML 요소를 선택하는 데 사용되며, 다양한 선택자를 제공합니다.
선택자를 사용하여 선택된 요소는 일반적으로 변수에 할당되어 나중에 사용됩니다.
선택된 요소를 조작하는 데 사용할 수 있는 다양한 메서드와 속성이 있습니다.
그럼 한번 알아볼까요! 🧐
<script>
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
//문제 정보
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber = "1";
const infoQuestion = "인접하는 두 색의 경계 부분의 색상, 영도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";
//문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestion.innerText = infoQuestion;
quizQuestionNum.innerText = infoNumber;
quizAnswerResult.innerText = infoAnswer;
//정답 숨기기
quizAnswerResult.style.display = "none";
//정답 확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
})
</script>
자바스크립트의 다양한 선택자
| 선택자 | 설명 |
| getElementById | HTML 문서에서 ID 속성을 사용하여 요소를 선택 |
| getElementsByClassName | HTML 문서에서 class 속성을 사용하여 요소를 선택 |
| getElementsByTagName | HTML 문서에서 지정된 태그 이름을 가진 모든 요소를 선택 |
| querySelector | CSS 선택자를 사용하여 HTML 문서에서 첫 번째 일치하는 요소를 선택 |
| querySelectorAll | CSS 선택자를 사용하여 HTML 문서에서 모든 일치하는 요소를 선택 |
| parentNode | 해당 요소의 부모 요소를 선택 |
| childNodes | 해당 요소의 모든 자식 요소를 선택 |
| firstChild | 해당 요소의 첫 번째 자식 요소를 선택 |
| lastChild | 해당 요소의 마지막 자식 요소를 선택 |
| nextSibling | 해당 요소의 다음 형제 요소를 선택 |
| previousSibling | 해당 요소의 이전 형제 요소를 선택 |
위의 표는 자바스크립트에서 가장 일반적으로 사용되는 선택자들입니다.
그중에서도 "querySelector"와 "querySelectorAll"이 대중적으로 가장 많이 쓰이는 선택자입니다.
보통 document.선택자("요소명")의 형태로 쓰이며, 해당 요소의 속성 및 값을 변경합니다.
위의 코드는 class "quiz__wrap"를 선택해 변수 "quizWrap"에 대입함으로써, "quizWrap"은 자식 요소의 "document."을 대신하게 됩니다.
브라우저가 웹 페이지를 읽을 때 전체를 읽지 않고 해당 부분을 먼저 보기 때문에 조금 더 효율적으로 작동할 수 있습니다.
각주 "//문제 정보"에 각각 요소에 대입할 데이터를 변수에 입력하고 있음을 볼 수 있습니다.
이로써 우리는 할당된 변수를 선택자를 이용해 HTML 요소의 속성을 변경할 수 있습니다.
자바스크립트의 다양한 메서드()와 속성
| 메서드() 속성 | 설명 |
| innerText | 요소의 내용을 설정하거나 반환합니다. 이 속성을 사용하면 요소의 내용을 쉽게 조작할 수 있습니다. |
| addEventListener() | 요소에 이벤트 리스너를 추가합니다. 이벤트 리스너는 이벤트가 발생했을 때 실행되는 함수입니다. |
| style.display | 요소의 표시 방법을 설정하거나 반환합니다. 이 속성을 사용하면 요소를 숨기거나 표시할 수 있습니다. |
위의 표는 코드에서 사용했던 메서드를 모아놓은 것입니다.
"innerText"는 선택한 HTML 요소의 내용을 각주 "//문제 정보"에서 할당한 변수의 데이터로 설정하는 메서드입니다.
이처럼 "innerText" 속성은 요소의 설정을 바꾸고 반환하는 기능을 합니다.
"addEventListener()"는 ("click", function(){})과 함께 쓰이고 있습니다.
이를 해석하면 해당 요소를 '클릭'하면 괄호 안의 함수(function)를 실행한다는 뜻입니다.
이를 이용해 사용자가 정답을 입력하면 보여줄 요소를 함수 안에 넣었습니다.
함수 안의 "style.display"는 확인과 결과창이 클릭을 했을 때 어떤 모양으로 보여줄지 CSS를 변경하는 속성입니다.
퀴즈의 결과가 포함된 CSS가 'inline'이기 때문에 'block'으로 바꿔서 보여주고, 확인창을 가리는 'none'을 사용했습니다.
😮💨 이번 예제에 쓰인 주관식 확인하기 유형 보러 가기
😮💨 codepen design by David López
