# 1.선택하기

javascript,

partial

# 목차

1. querySelector()
1. 1.1. 문법
  1. 1.1.1. 예제
2. querySelectorAll()
1. 2.1. 문법
  1. 2.1.1. 예제

# 1. querySelector()

css선택자(클래스 선택자, HTML 요소선택자, ID선택자 등)를 이용 해 HTML 요소를 선택하고 원하는 함수를 적용할 수 있다. 보통은 상수형 변수에 선언하여 사용한다.

# 1.1. 문법

document.querySelelctor('선택자');

# 1.1.1. 예제

미리보기

https://qwerewqwerew.github.io/source/js/partial/selector/1.html

const searchEl = document.querySelector('.search');
const searchInputEl = searchEl.querySelector('input');
searchEl.addEventListener('click', function () {
	searchInputEl.focus();
});
searchInputEl.addEventListener('focus', function () {
	searchEl.classList.add('focused');
	searchInputEl.setAttribute('placeholder', '통합검색');
});
searchInputEl.addEventListener('blur', function () {
	searchEl.classList.remove('focused');
	searchInputEl.setAttribute('placeholder', '');
});

# 2. querySelectorAll()

다수의 요소를 선택해서 배열로 할당하고 반복 문을 이용해 각 요소에 원하는 기능을 동작하게 할 수 있다.

# 2.1. 문법

document.querySelelctorAll('선택자');

# 2.1.1. 예제

미리보기

https://qwerewqwerew.github.io/source/js/partial/selector/2.html

<body>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<script>
		const boxes = document.querySelectorAll('.box');
		boxes.forEach((box) => {
			box.style.width = '100px';
			box.style.height = '100px';
			box.style.margin = '10px';
			box.style.backgroundColor = 'skyblue';
		});
	</script>
</body>

es6 javascript selector