querySelector()와 getelementbyid()에 대하여 알아보자.

오늘은 JavaScript에서 DOM(Document Object Model) 요소를 선택하는 두 가지 주요 방법인 querySelector와 getElementById에 대하여 알아보겠습니다.

 

1. querySelector()

querySelector는 CSS 선택자를 사용하여 문서 내에서 첫 번째로 일치하는 요소를 반환합니다.

 

 

 

위의 예시에서 querySelector('.example')는 class가 "example"인 첫 번째 div 요소를 선택합니다.

추가적으로 querySelector에서 id는 #,  class는 .으로 표현하며, 안으로 들어가는 표현은 공백으로 합니다.

 

 

위와 같이 id="" 값은 "#id이름"으로 읽어낼 수 있으며 class ="" 값은 ".class이름"으로 읽을 수 있습니다.

 

 

 

2. getElementById()

getElementById는 주어진 ID와 일치하는 요소를 반환합니다.

문서 내에서 해당 ID를 가진 요소가 여러 개 있더라도 첫 번째 일치하는 요소만 반환합니다.

ID는 문서 내에서 고유해야 합니다.

 

 

위의 예시에서 getElementById('firstDiv')는 ID가 "firstDiv"인 첫 번째 div 요소를 선택합니다.

 

정리 -

• querySelector는 CSS 선택자를 사용하여 요소를 선택하며, 선택자에 일치하는 첫 번째 요소를 반환합니다.
• getElementById는 주어진 ID에 해당하는 요소를 반환하며, ID는 고유해야 합니다.

일반적으로, 클래스, 태그 이름 등에 따라 요소를 선택할 때는 querySelector를 사용하고, ID로 요소를 선택할 때는 getElementById를 사용하는 것이 일반적인 패턴입니다.