CSS 선택자를 기반으로 element를 찾는 javascript의 querySelector()와 querySelectorAll()을 사용하는 방법
JavaScript의 querySelector()및 querySelectorAll() 메소드 소개
querySelector()는 Element 인터페이스의 메소드 입니다. querySelector() 메소드는 CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해줍니다. 다음 코드는 querySelector() 메소드의 문법을 보여줍니다.
let element = parentNode.querySelector(selector);위 코드의 selector는 CSS 선택자 또는 CSS 선택자 그룹으로 parentNode의 하위 element 중 매치되는 항목을 반환합니다. 만일 selector가 올바르지 않은 CSS 문법이라면 이 메소드는 SyntaxError 예외를 발생시킵니다. 또한 CSS 선택자에 매치되는 element가 하나도 없을 경우 querySelector()는 null을 리턴합니다. 참고로 querySelector() 메소드는 document 객체나 모든 Element 객체에서 사용 가능합니다. querySelector() 외에도 querySelectorAll() 메소드도 사용할 수 있는데 이는 CSS 선택자나 CSS 선택자 그룹에 매치되는 모든 element를 반환합니다.
let elementList = parentNode.querySelectorAll(selector);querySelectorAll() 메소드는 CSS 선택자에 매치되는 모든 element의 NodeList를 반환합니다. 만약 아무 element도 매치되는게 없으면 빈 NodeList(길이가 0인 배열)를 반환합니다. 참고로 NodeList는 Array 객체가 아니라 배열 비슷한 객체이지만 현대 브라우저에서는 forEach() 메소드나 for..of로 루프 사용이 가능합니다. NodeList를 Array로 전환하려면 다음과 같이 Array.from() 메소드를 사용할 수 있습니다.
let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);Basic selectors
다음의 HTML 문서가 있다고 가정해봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>querySelector() Demo</title>
</head>
<body>
<header>
<div id="logo">
<img src="img/logo.jpg" alt="Logo" id="logo">
</div>
<nav class="primary-nav">
<ul>
<li class="menu-item current"><a href="#home">Home</a></li>
<li class="menu-item"><a href="#services">Services</a></li>
<li class="menu-item"><a href="#about">About</a></li>
<li class="menu-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Welcome to the JS Dev Agency</h1>
<div class="container">
<section class="section-a">
<h2>UI/UX</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
Adipisci, obcaecati repellat.</p>
<button>Read More</button>
</section>
<section class="section-b">
<h2>PWA Development</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
provident labore nihil in earum.</p>
<button>Read More</button>
</section>
<section class="section-c">
<h2>Mobile App Dev</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
laborum debitis eos?</p>
<button>Read More</button>
</section>
</div>
</main>
<script src="js/main.js"></script>
</body>
</html>1) Universal selector
범용 선택자는 *로 표시하며 이는 모든 타입의 모든 element를 매치합니다. 다음의 예제는 querySelector()를 사용해 document의 첫 번째 element를 가져오는 코드입니다.
let element = document.querySelector('*');그리고 다음은 document의 모든 element를 가져오는 코드입니다.
let elements = document.querySelectorAll('*');2) Type selector
노드이름으로 element를 찾기 위해서는 타입 선택자를 사용하면 됩니다. 예를 들어 a는 모든 <a> element를 선택합니다. 다음의 예제는 document의 첫 번째 h1 element를 찾는 코드입니다.
let firstHeading = document.querySelector('h1');다음의 코드는 모든 h2 element를 찾는 예제입니다.
let heading2 = document.querySelectorAll('h2');3) Class selector
CSS 클래스로 element를 찾기 위해서는 클래스 선택자 문법을 사용합니다. 다음의 예는 menu-item이라는 클래스를 가진 첫 번째 element를 찾는 코드입니다.
let note = document.querySelector('.menu-item');그리고 다음 예제는 모든 menu-item 클래스를 찾는 코드입니다.
let notes = document.querySelectorAll('.menu-item');4) ID Selector
id로 element를 선택하기 위해서는 id 선택자 문법을 사용하면 됩니다. 다음 코드는 id가 logo인 첫 번째 element를 선택하는 예제입니다.
let logo = document.querySelector('#logo');document에서 id 자체가 유일한 값이기 때문에 querySelectorAll()은 무의미 합니다.
5) Attribute selector
element의 속성으로 element를 찾으려면 다음과 같이 속성 선택자 문법을 사용합니다.
[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]다음 예제는 autoplay라는 속성을 가지고 어떤 값이든 가지는 첫 번째 element를 찾는 코드입니다.
let autoplay = document.querySelector('[autoplay]');다음은 autoplay 속성에 아무 값을 가지는 모든 element를 가져오는 코드입니다.
let autoplays = document.querySelectorAll('[autoplay]');Grouping selectors
여러개의 선택자를 하나로 묶어 사용하려면 콤마를 사용해 여러 선택자를 나열하면 됩니다. 선택자 목록은 각각의 선택자에 매치되는 모든 element를 선택합니다. 아래 코드는 모든 <div>와 <p> element를 찾는 예제입니다.
let elements = document.querySelectorAll('div, p');Combinators
1) descendant combinator
하위 노드를 찾고 싶을 때는 공백으로 하위 합성자 문법을 사용합니다. 예를 들어 "p a"는 <p> element 하위의 모든 <a> element의 매치를 찾습니다.
let links = document.querySelector('p a');2) Child combinator
">" 자식 합성자를 사용하면 element의 바로 밑에 존재하는 element에서 매치합니다. 다음은 <ul> element 바로 밑에 있는 <li> element를 찾는 예제입니다.
let listItems = document.querySelectorAll('ul > li');<ul> element 중 nav 클래스를 가진 element 들의 바로 밑의 모든 <li> element를 찾기 위해서는 다음과 같이 하면 됩니다.
let listItems = document.querySelectorAll('ul.nav > li');3) General sibling combinator
"~" 합성자는 같은 부모를 공유하는 형제노드를 선택합니다. 예를 들어 "p ~ a"는 <p> element와 같은 부모를 공유하는 <a> element를 매치합니다.
let links = document.querySelectorAll('p ~ a');4) Adjacent sibling combinator
"+"로 표현하는 인접한 형제 합성자는 이웃에 있는 형제를 선택합니다. "h1 + a"는 <h1>에 이웃하는 <a>를 선택합니다.
let links = document.querySelectorAll('h1 + a');그리고 첫 번째 <h1> 바로옆의 <a>를 선택하려면
let links = document.querySelector('h1 + a');Pseudo
1) Pseudo-classes
":"으로 표현하는 수도 클래스는 element의 상태를 매치합니다. 예로 "li:nth-child(2)"는 <li> element들 중 두 번째를 매치합니다.
let listItem = document.querySelectorAll('li:nth-child(2)');2) Pseudo-elements
"::"는 document에 포함되지 않은 엔티티를 나타냅니다. 예를 들어 "p::first-line"은 모든 <p> element 중 첫 번째 줄에 있는 항목과 매치합니다.
let links = document.querySelector('p::first-line');Summary
- querySelector()는 CSS 선택자나 CSS 선택자 그룹에 매치되는 첫 번째 element를 찾습니다.
- querySelectorAll()은 CSS 선택자나 CSS 선택자 그룹에 매치되는 모든 element를 찾습니다.
- CSS 선택자는 CSS 규칙을 적용하여 element를 정의합니다.
참고: https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/
'프론트엔드' 카테고리의 다른 글
| [자바스크립트] Cannot read properties of null (getElementById 와 querySelector차이점) (0) | 2023.01.26 |
|---|---|
| [자바스크립트] request / response / 콜백 / Fetch / document 개념 (0) | 2023.01.20 |
| [thymeleaf] 날짜형식 변환 format (0) | 2022.12.17 |