반응형
querySelector 와 querySeletorAll 은 CSS 슬 선택자를 사용하여 , HTML 요소를 선택할 수 있게 해주는 메서드
querySelector : 첫 번쨰로 일치하는 요소 하나만 반환
querySelectorAll : 일치하는 모든 요소를 NodeList 형태로 반환
- CSS 선택자를 사용하여 요소를 선택할 수 있습니다. (#id, .class , tag 등..)
# 1. ID로 요소 선택하기
const elementById = document.querySelector("#myId");
// id 가 myId 인 첫 번째 요소를 반환
# 2. 클래스로 요소 선택하기
const elementByClass = document.querySelector(".myClass");
// class가 myClass 인 첫 번째 요소
# 3. 태그 이름으로 요소 선택하기
const elementByTag = document.querySelector('div');
// 첫 번째 div 요소를 반환
# 4. 속성 선택자 사용하기
const elementByAttribute = document.querySelecot("[data-test="dh"]");
// data-test 속성이 dh 인 첫 번째 요소
# 5. 복합 선택자 사용하기
const complexSelector = document.querySelector('div.container > p.text')
// container 클래스를 가진 div 의 직접적인 자식중 text 클래스를 가진 p 태그를 반환
# 6. 특정 컨테이너 내의 요소 선택하기
const container = document.querySelector('.container');
if(container) {
const elementsInContainer = container.querySelectorAll('p');
}
// container 클래스 내부의 모든 p 태그 선택
# 7. const firstChild = document.querySelector('ul > li:first-child');
// ul 의 첫 번째 li 자식 요소
# 8. const lastChild = document.querySelector('ul > li:last-child');
// ul 의 마지막 li 자식 요소
# 9. const SecondItem = document.querySelector('.item:nth-child(2)');
// 두 번째 .item 요소
# querySelectorAll
# 1. 여러 요소 선택하기
const allElements = document.querySelectorAll(".item");
// 모든 item 클래스를 가진 요소들의 NodeList 반환
# 2. NodeList 순회하기
allElements.forEach(ele => {
console.log(ele);
ele.style.color="red";
})
// NodeList 인 allElements 를 순회하며, item 클래스의 요소의 텍스트 색상을 레드로 변경
DOM을 조작 하는 예제
# 1. 해당 텍스트 문구 변경
const title = document.querySelector('h1');
if(title) {
title.textContent = "새로운 제목"
}
# 2. 스타일 변경
const textColorChange = document.querySelector('p.highlight');
if(textColorChange) {
textColorChange.style.color="yellow";
textColorChange.style.fontWeight="bold"
}
# 3. 클래스 추가/ 제거하기
// 추가
const button = document.querySelector('button.toggle');
if(button) {
button.addEventListner('click' ,()=> {
const targetEle = document.querySelector('.target');
if(targetEle) {
targetEle.classList.toggle('active');
}
} )
}
// .target 요소에 active 가 없으면 , 클래스 추가
// .target 요소에 active 클래스가 이미 있으면 , 클래스가 제거
# 4. 여러 요소에 이벤트 리스너 추가
const allButtons = document.querySelectorAll('button');
allButtons.forEach(button => {
button.addEvnetListener('click' , (evnet) => {
console.log('클릭 이벤트 : ' , event.target.textContent)
})
})
#5. 동적으로 생성된 요소 선택하기
function createNewEle(){
const newDiv = document.createElement('div');
newDiv.className="newDiv-element";
newDiv.textContent="동적으로 새로 생성된 div"
document.body.appendChild(newDiv);
const dynamicEle = document.querySelector(.newDiv-element);
}
리액트에서는 useRef 를 사용하여 Dom 요소에 접근을 하다보니 , 이전 Vanilla.js 사용하던 DOM 조작시 querySelector 를 활용한 방법에 잊지 않도록 기록을 해두는게 좋겠다 생각이 들었다.
React는 가상 DOM 시스템을 통해서 이루어지다보니, 불필요한 직접적인 DOM 의 업데이트를 최소화 한다.
직접적인 DOM 조작은 이 최적화를 무시하게 된다.
상태관리와 무관하게 직접적으로 DOM 에 접근해서 나는 다른 상태관리와 무관하게 이 UI 는 이 이렇게 직접적으로 조작을 통해서 보여야해 , 하는 순간이라면, querySelector 를 통해서 하는 게 좋다.
하지만 그래도 리액트 환경에서는 리액트 Hook 을 통해 , 라이프사이클과 조화롭게 작동하도록 하는 것이 좋다.
반응형