자바스크립트 HTML class 이름으로 요소 취득 방법 getElementsByClassName

2023.08.09

자바스크립트에서 HTML의 class 속성값을 지정해 해당 요소의 값은 취득하는 방법을 알아보겠습니다.

class 속성값을 지정해 해당 요소에 접근하기 위해서는 getElementsByClassName을 사용합니다.

getElementsByClassName 사용 방법을 먼저 보겠습니다.

getElementsByClassName(class 이름)

접근하고 싶은 class의 이름을 파라미터로 지정합니다.

 

getElementsByClassName 사용 방법

class 이름을 지정해 요소의 정보들을 취득해오는 getElementsByClassName에 대해 자세히 살펴보겠습니다.

샘플 소스를 보면서 getElementsByClassName 사용 방법을 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div.box, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>오늘 일정</p>

<div class="box">
  <p>자바 스크립트 스터디 공부</p>
  <div id="shopinfo">
    <p class="box">장소：학교</p>
    <p class="box">시간：12시</p>
  </div>
</div>

<button onClick="getElements();">요소 취득</button>

<script>
function getElements(){

    let elements = document.getElementsByClassName('box');

    let len = elements.length;
    for (let i = 0; i < len; i++){
        alert(elements.item(i).textContent);
        elements.item(i).style.border="2px solid #0000ff";

    }
}
</script>
</body>
</html>

 

요소 취득 버튼을 누르면 class 이름이 box인 모든 요소에 접근을 해 정보를 취득합니다.

textContent는 해당 요소에 입력된 문자열을 취득합니다.

style을 사용하면 해당 요소의 디자인도 변경이 가능합니다.

 

특정 요소 가져오기

getElementsByClassName 요소를 사용해 class 이름을 지정하면 해당 class 이름을 가진 모든 요소들을 가지고 옵니다.

이번에는 특정 요소만 지정해 가지고 오는 방법을 알아보겠습니다.

원하는 요소만 가져오기 위해서는 미리 id를 지정해야 합니다.

지정한 id에 getElementById를 사용해 접근합니다.

let element = document.getElementById(id 이름);

let elements = element.getElementsByClassName(class 이름);

 

또는

let elements = document.getElementById(id 이름).getElementsByClassName(class 이름);

 

형태로 작성합니다.

샘플 코드를 보면서 자세한 사용 방법을 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName</title>
<style type="text/css">
  div.box, p{
    padding:20px;
    margin:10px;
    width:30%;
  }
  .box{
    border:1px solid #ff0000;
  }
</style>
</head>
<body>

<p>오늘 일정</p>

<div class="box">
  <p>자바 스크립트 스터디 공부</p>
  <div id="shopinfo">
    <p class="box">장소：학교</p>
    <p class="box">시간：12시</p>
  </div>
</div>

<button onClick="getElements();">요소 취득</button>

<script>
function getElements(){

    let element = document.getElementById('shopinfo');
    let elements = element.getElementsByClassName('box');

    let len = elements.length;
    for (let i = 0; i < len; i++){
        alert(elements.item(i).textContent);
        elements.item(i).style.border="2px solid #0000ff";

    }
}
</script>
</body>
</html>

 

요소 취득 버튼을 누르면 id가 shopinfo인 요소에 감싸인 class 이름이 box인 요소들만 취득합니다.

취득한 요소에 접근해 문자열을 취득하거나 스타일을 변경할 수 있습니다.

getElementsByClassName 사용 방법에 대해 알아봤습니다.

댓글