JavaScript - 클래스 이름으로 element 찾는 방법

Javascripthtml

JavaScript에서 클래스 이름으로 element를 찾는 방법을 알아보겠습니다.

1. getElementsByClassName()를 이용한 방법

document.getElementsByClassName(name)은 클래스 이름이 name이거나, 클래스 이름에 name이 포함되어있는 element들을 모두 가져옵니다.

var elements = document.getElementsByClassName("example");

아래 예제는 클래스 이름이 example이거나 example이 포함된 element들을 모두 가져오고, for문을 사용하여 모두 출력합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
	<div class="a example">첫 번째 element</div>
	<div class="example">두 번째 element</div>
	<div class="example">세 번째 element</div>

	<script>
		// 클래스 이름이 "example"인 모든 element 가져오기
		var elements = document.getElementsByClassName("example");

		// 가져온 element들을 모두 출력
		for(var i = 0; i < elements.length; i++) {
		  console.log(elements[i].innerHTML);
		}
	</script>
</body>
</html>

Output:

첫 번째 element
두 번째 element
세 번째 element

두개 문자열을 포함하는 클래스 이름

document.getElementsByClassName("example c")는 클래스 이름에 example과 c 문자열을 포함하고 있는 element를 찾습니다.

아래 예제에서 하나만 해당하기 때문에, 세번째 element가 출력됩니다.

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
	<div class="a example">첫 번째 element</div>
	<div class="b example">두 번째 element</div>
	<div class="c example">세 번째 element</div>

	<script>
		// 클래스 이름이 "example"인 모든 element 가져오기
		var elements = document.getElementsByClassName("example c");

		// 가져온 element들을 모두 출력
		for(var i = 0; i < elements.length; i++) {
		  console.log(elements[i].innerHTML);
		}
	</script>
</body>
</html>

Output:

세 번째 element

2. querySelector()를 이용한 방법

document.querySelector()를 이용하여 클래스 이름으로 element를 찾을 수 있습니다.

  • querySelector(".example")는 클래스 이름이 example인 element를 찾습니다. (.는 클래스 선택자를 의미, example은 찾으려는 이름)
  • 조건에 해당하는 element가 여러개 일 때, 가장 첫번째 element를 가져옴
<!DOCTYPE html>
<html>
<head>
	<title>Query Selector Example</title>
</head>
<body>
	<div class="example">첫 번째 element</div>
	<div class="example">두 번째 element</div>
	<div class="example">세 번째 element</div>

	<script>
		// 클래스 이름이 "example"인 첫 번째 element를 가져옴
		var element = document.querySelector(".example");

		// 가져온 element 출력
		console.log(element.innerHTML);
	</script>
</body>
</html>

Output:

첫 번째 element

3. querySelectorAll()을 이용한 방법

document.querySelectorAll()를 이용하여 클래스 이름으로 element를 찾을 수 있습니다.

  • querySelectorAll(".example")은 클래스 이름이 example인 element를 모두 찾음 (.는 클래스 선택자를 의미, example은 찾으려는 이름)
  • querySelector()와 다르게, 조건에 해당하는 모든 element를 가져옴
<!DOCTYPE html>
<html>
<head>
	<title>Query Selector Example</title>
</head>
<body>
	<div class="example">첫 번째 element</div>
	<div class="example">두 번째 element</div>
	<div class="example">세 번째 element</div>

	<script>
		// 클래스 이름이 "example"인 모든 element들을 가져옴
		var elements = document.querySelectorAll(".example");

		// 가져온 element들을 모두 출력
		for(var i = 0; i < elements.length; i++) {
		  console.log(elements[i].innerHTML);
		}
	</script>
</body>
</html>

Output:

첫 번째 element
두 번째 element
세 번째 element
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha