document.getElementById 혹은 id를 사용해서 요소 검색하기
<div id="elem">
<div id="elem-countent">Element</div>
</div>
<script>
let elem = document.getElementById("elem");
console.log(elem);
elem.style.background = 'red';
querySelectorAll
✔️ 주어진 css 선택자에 대응하는 요소 모두를 반환.
✔️ css 선택자를 활용할 수 있음
: hover, :active, :last-child
let elements = document.querySelectorAll('ul > li:last-child');
for(let elem of elements){
console.log(elem.innerHTML);
}
querySelector
✔️ 주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환.
matches
✔️ CSS선택자와 일치하는지 여부를 판단해줌. 일치하면 true, 아니면 false
📌 요소들의 배열을 순회할 때 원하는 요소만 걸러내고자 할 때 유용하다.
<HTML>
<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>
<div class="text">text is...</div><JS>
for(let elem of document.body.children){
//href 속성값이 zip으로 끝나는 a 태그 요소를 찾아 href 반환.
if(elem.matches('a[href$="zip"'){
console.log("주어진 CSS 선택자와 일치하는 요소 :" + elem.href);
}
}
//일치 요소 :http://example.com/file.zipclosest
✔️ 자기 자신을 포함하여 CSS선택자와 일치하는 가장 가까운 조상 요소를 찾아준다.
<HTML>
<h1>목차</h1>
<div class="contents">
<ul class="book">
<li class="chapter">1장</li>
<li class="chapter">2장</li>
</ul>
</div><JS>
let chapter = document.querySelector('.chapter');
console.log(chapter.closest('.book'));
console.log(chapter.closest('.contents'));
console.log(chapter.closest('h1'));
contains
✔️ 자기 자신이거나 해당 요소를 포함하고 있으면 true를 반환한다.
elemA.contains(elemB)
요약
- 대부분 편리한 querySelector or querySelectorAll을 사용한다.
- elem.maches는 해당 CSS선택자와 일치하는지 여부를 검사해준다.
이용하면 요소들을 순회할 때 조건에 맞는 요소들만 반환할 수 있다.
- elem.closest 는 CSS 선택자와 일치하는 가장 가까운 조상 요소를 탐색한다.(자기 자신도 포함)
- elem.contains 는 요소가 속하거나 일치할 때 true를 반환한다.
Reference
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] 속성과 프로퍼티 (0) | 2022.01.11 |
|---|---|
| [Javascript] 주요 노드 프로퍼티 (0) | 2022.01.11 |
| [Javascript] 배열 메소드 연습문제 (0) | 2022.01.10 |
| [Javascript] DOM 탐색 (0) | 2022.01.10 |
| [Javascript] 브라우저 환경과 다양한 명세서 (0) | 2022.01.10 |
