querySelector 로 DOM 선택

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 을 통해 , 라이프사이클과 조화롭게 작동하도록 하는 것이 좋다.