[Javascript] 요소 검색 getElement, querySelector, querySelectorAll

원하는 요소에 접근하기 위해서는 상대 위치, 절대 위치를 사용하면 된다. 요소가 서로 가까운 경우에 상대 위치를 사용하면 되고, 상대 위치를 이용하지 않으면서 원하는 목표 요소에 접근하기 위해서는 절대 위치를 검색하는 방법을 통해 접근할 수 있다.

 

 

 

 

목차

1. getElementById(), id 사용하여 검색
2. querySelectorAll()
3. querySelector()

 

 

 

 

 

1. getElementById(), id 사용하여 검색

 

형식

document.getElementById(selectors);

<div id="container">
	<h1 id="title">타이틀입니다.</h1>
	<span id="text-ty1">텍스트입니다.</span>
</div>

<script>
	// <방법1> getElementById 사용
	const cont = document.getElementById('container');
    
	// <방법2> document 대신 아이디를 바로 입력해도 검색이 가능하다. (id가 title인 요소 참조)
	title.style.background = 'yellow';
    
	// <방법3> 아이디에 하이픈 등 특수문자가 있을 경우 <방법2>는 불가하므로 아래와 같이 작성한다.
	window['text-ty1'].style.background = 'blue';
</script>

 

단,  id를 직접 참조하는 경우, 같은 이름의 변수가 선언되면 참조가 불가해진다. 따라서 <방법 2>와 <방법 3>처럼 id를 직접적으로 사용하는 코드는 변수와 충돌할 위험이 있으므로 지양하여야 한다.

 

<div id="container">
	<h1 id="title">타이틀입니다.</h1>
	<span id="text-ty1">텍스트입니다.</span>
</div>

<script>    
	const title = '새로운 제목'; // 변수로 선언되면서 id가 title인 요소를 더이상 참조하지 않는다.
	console.log(title); // 결과 : 새로운 제목
</script>

 

 

 

 

2. querySelectorAll()

querySelectorAll은 문서 내에서 선택자와 일치하는 모든 요소를 NodeList로 반환한다. 

 

형식

document.querySelectorAll(selectors);

 

<div id="list">
	<ul>
	  <li data-g="1">김사랑</li>
	  <li data-g="2">김철수</li>
	  <li data-g="1">이하나</li>
	  <li data-g="2">홍길동</li>
	</ul>
</div>

<script>
	const list = document.getElementById('list');
	let gender1 = list.querySelectorAll("li[data-g='1']");
	
	console.log(gender1);
	//NodeList(2) [li, li] 
</script>

 

 

 

3. querySelector()

querySelectorAll와 다르게 querySelector는 문서 내에서 선택자와 일치하는 첫 번째 요소만 반환한다. 선택자와 일치하는 요소가 없다면 null 값을 반환한다.

 

형식

document.querySelector(selectors);

<div id="list">
	<ul>
	  <li data-g="1">김사랑</li>
	  <li data-g="2">김철수</li>
	  <li data-g="1">이하나</li>
	  <li data-g="2">홍길동</li>
	</ul>
</div>

<script>
	const list = document.getElementById('list');
	let gender1 = list.querySelector("li[data-g='1']");
	
	console.log(gender1.innerHTML); // 김사랑
</script>

 

querySelector를 사용하여 특정 id를 가진 요소를 검색할 수도 있다. id는 한 페이지에서 고유의 값이며 재사용될 수 없으므로 한 개만 존재한다. 따라서 querySelector가 첫 번째 요소만 가져온다고 해도 상관없다. 형태는 조금 다르니 아래 예시에서 참고하면 된다.

 

<div id="list">
	<ul>
	  <li data-g="1">김사랑</li>
	  <li data-g="2">김철수</li>
	  <li data-g="1">이하나</li>
	  <li data-g="2">홍길동</li>
	</ul>
</div>

<script>
	const list1 = document.getElementById('list');
	const list2 = document.querySelector('#list');
	
	console.log(list1); 
	console.log(list2);
	// 두 결괏값은 같다.
</script>