자바스크립트 선택자 예약어 정리, 부모/자식/형제

가물가물할때마다

검색하는게 시간낭비 인것같아 기록해봤다.

 

querySelector

문서 내 첫 번째 요소를 반환

document.querySelector('.class');

 

querySelectorAll
문서내 모든 요소 반환

document.querySelectorAll('.class');

 

id, class, tag

해당되는 모든 요소 반환

document.getElementById("#id")
document.getElementsByClassName(".class")
document.getElementsByTagName("div")

 

name

속성값이 일치하는 모든 요소 반환

document.getElementsByName("password")

 

children

index 자식 선택자

label.children[0]

 

firstElementChild
부모 요소의 첫 번째 자식 요소 반환

document.getElementById('parent').firstElementChild

 

lastElementChild
부모 요소의 마지막 자식 요소 반환

document.getElementById('parent').lastElementChild

 

parentNode
해당 요소의 부모 요소 반환

document.getElementById('child').parentNode

 

closest
가장 가까운 조상 요소 반환, 
해당 선택자와 일치하는 요소를 찾을때까지 상위요소를 검색

document.getElementById('child').closest('.parent')

 

nextSibling
다음 형제요소 반환

document.getElementById('child').nextSibling

 

nextElementSibling
다음 형제요소 중 엘리먼트요소 반환,
간혹 nextSibling으로 엘리먼트가 잡히지않을경우, nextElementSibling을 이용해보자.

document.getElementById('child').nextElementSibling

 

previousSibling
이전 형제요소 반환

document.getElementById('child').previousSibling

 

previousElementSibling
이전 형제요소 중 엘리먼트요소 반환,
간혹 previousSibling으로 엘리먼트가 잡히지않을경우, previousElementSibling을 이용해보자.

document.getElementById('child').previousElementSibling

 

 

https://standout.tistory.com/213

특수문자 모음