- 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');
'Frontend > javaScript' 카테고리의 다른 글
절대 위치 구하기 (제이쿼리 사용하지 않고) (0) | 2023.06.28 |
---|---|
객체 배열 분류 동일 객체 참조 / 객체 복사(Object.assign) (0) | 2023.06.22 |
JSON.parse() 와 JSON.stringify() 파라미터 (0) | 2023.06.13 |
동등비교(==), 동일비교(===) (0) | 2023.06.07 |
[JavaScript] draggable 옵션 및 예제 (0) | 2023.05.04 |