라이브러리
[JAVASCRIPT] document.querySelector(selector) - CSS 선택자로 요소 하나 선택
document.querySelector(selector)
`document.querySelector(selector)`는 HTML 문서 내에서 특정 요소를 선택하는 메서드입니다. 이 메서드는 HTML 문서의 요소 중에서 선택자(selector)와 일치하는 요소를 반환합니다.
선택자(selector)
선택자는 HTML 문서의 요소를 선택하는 데 사용하는 문자열입니다. 선택자는 CSS 선택자와 유사하지만, JavaScript에서 사용하는 선택자는 CSS 선택자와 약간 다릅니다.
선택자 종류
다음은 document.querySelector(selector)에서 사용할 수 있는 선택자 종류입니다.
1. ID 선택자: `#id` 형식으로 사용합니다. 예를 들어, `document.querySelector('#header')`는 HTML 문서 내에서 id가 "header"인 요소를 선택합니다.
2. 클래스 선택자: `.class` 형식으로 사용합니다. 예를 들어, `document.querySelector('.header')`는 HTML 문서 내에서 class가 "header"인 요소를 선택합니다.
3. 태그 선택자: 태그 이름만 사용합니다. 예를 들어, `document.querySelector('h1')`는 HTML 문서 내에서 h1 태그를 선택합니다.
4. 속성 선택자: `[속성='값']` 형식으로 사용합니다. 예를 들어, `document.querySelector('[href="https://www.naver.com"]')`는 HTML 문서 내에서 href 속성이 "https://www.naver.com"인 요소를 선택합니다.
5. 자식 선택자: `요소 > 자식` 형식으로 사용합니다. 예를 들어, `document.querySelector('ul > li')`는 HTML 문서 내에서 ul 태그의 자식인 li 태그를 선택합니다.
6. 형제 선택자: `요소 + 형제` 형식으로 사용합니다. 예를 들어, `document.querySelector('li + li')`는 HTML 문서 내에서 li 태그의 형제인 li 태그를 선택합니다.
예제
다음은 document.querySelector(selector) 예제입니다.
#hostingforum.kr
javascript
// ID 선택자
const header = document.querySelector('#header');
console.log(header); // ...
// 클래스 선택자
const headers = document.querySelectorAll('.header');
console.log(headers); // NodeList(2) [ ...
, ...
]
// 태그 선택자
const h1s = document.querySelectorAll('h1');
console.log(h1s); // NodeList(2) [ ...
, ...
]
// 속성 선택자
const links = document.querySelectorAll('[href="https://www.naver.com"]');
console.log(links); // NodeList(1) [ ... ]
// 자식 선택자
const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');
console.log(lis); // NodeList(3) [ ..., ..., ... ]
// 형제 선택자
const lis2 = document.querySelectorAll('li + li');
console.log(lis2); // NodeList(2) [ ..., ... ]
이 예제는 document.querySelector(selector) 메서드의 다양한 사용 방법을 보여줍니다.
댓글목록
등록된 댓글이 없습니다.