선택자로 요소 가져오기(querySelector, querySelectorAll)

• querySelector(): 선택자를 사용하여 첫 번째 일치하는 요소를 가져옵니다.
• querySelectorAll(): 선택자를 사용하여 모든 일치하는 요소를 가져옵니다.

querySelector() 

querySelector() 메서드는 문서 내에서 특정 CSS 선택자에 해당하는 첫 번째 요소를 반환하는 메서드입니다.

이 메서드는 Document 객체뿐만 아니라 Element 객체에서도 사용할 수 있습니다. 다음은 querySelector() 메서드의 구문입니다:

element.querySelector(selector);

• element: 요소의 하위 요소 중에서 선택할 요소입니다. Document 객체 또는 다른 Element 객체가 될 수 있습니다.
• selector: 선택할 요소의 CSS 선택자입니다. CSS 선택자는 요소의 태그 이름, 클래스, 아이디 등을 기반으로 선택할 수 있습니다.

querySelector() 메서드는 선택자에 해당하는 첫 번째 요소를 반환합니다. 선택자에 일치하는 요소가 없는 경우 null을 반환합니다.

다음은 querySelector() 메서드의 예시입니다:

<div id="container">
  <p class="highlight">Hello, World!</p>
  <p>Another paragraph</p>
</div>

const container = document.getElementById('container');
const paragraph = container.querySelector('p');
console.log(paragraph.textContent); // "Hello, World!"

위의 예시에서 querySelector() 메서드를 사용하여 container 요소 내에서 첫 번째 <p> 요소를 선택합니다. 선택된 요소의 내용을 콘솔에 출력하면 "Hello, World!"가 출력됩니다.

CSS 선택자를 사용하여 요소를 세밀하게 선택할 수 있으며, 태그 이름, 클래스, 아이디 등을 조합하여 다양한 선택 패턴을 만들 수 있습니다.

 

querySelectorAll() 

querySelectorAll() 메서드와 CSS 선택자를 사용하여 여러 클래스를 동시에 지정하여 요소를 가져올 수 있습니다.

CSS 선택자에서 클래스 이름을 동시에 사용하기 위해 클래스 선택자 .classname을 이용합니다. 클래스 선택자를 동시에 사용하려면 각 클래스 이름 앞에 .을 붙여야 합니다.

다음은 querySelectorAll() 메서드를 사용하여 두 개의 클래스를 동시에 지정하여 요소를 가져오는 예시입니다:

const elements = document.querySelectorAll('.class1.class2');

<i class="icon20 icon-up" style="display: none;"></i>
<i class="icon20 icon-down" style="display: none;"></i>

const elements = document.querySelectorAll('.icon20.icon-up, .icon20.icon-down');