document.querySelector 사용 방법에 대해 알아볼게요
그동안 document 객체를 가져올때 class만 가져왔는데
더 다양하게 사용이 가능해요 !
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');
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');
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');