[JS] className 속성 / getElementsByClassName메서드

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

bom's happy life

[JS] className 속성 / getElementsByClassName메서드 본문

Deveolpment Study🗂️/Javascript

[JS] className 속성 / getElementsByClassName메서드

bompeach 2023. 6. 3. 16:01

1. className 속성(property)

- `className `은 DOM 요소의 클래스를 나타내는 속성이다.

- 요소의 클래스 이름을 문자열 형태로 가져오거나 설정할 수 있다.

- 예를 들어, <p> 요소를 선택하고 해당 요소의 className 속성을 사용하여 클래스 이름을 가져오고 변경한다. 초기 상태에서 <p> 요소에는 "my-class"라는 클래스 이름이 있다. className 속성을 통해 해당 클래스 이름을 가져온 후, element.className = "new-class"와 같이 사용하여 클래스 이름을 "new-class"로 변경한다. 변경된 클래스 이름을 확인하기 위해 다시 console.log(element.className)을 사용하여 출력한다. -> 값 : `new-class`

사용 예시 →

<body>

    <p id="demo" class="my-class">Hello, World!</p>

    <script>
    // 요소 가져오기
    var element = document.getElementById("demo");

    // className 속성 사용하기
    console.log(element.className); // "my-class"

    // className 속성 변경하기
    element.className = "new-class";

    // 변경된 className 확인하기
    console.log(element.className); // "new-class"
    </script>
    
</body>

2. getElementsByClassName 메서드(method)

- `getElementsByClassName ` 은 Document 또는 Element 인터페이스에 속한 메서드이다.

- DOM에서 클래스 이름을 기반으로 요소를 선택하는 메서드이다.

- 이 메서드를 사용하면 특정 클래스를 가진 모든 요소를 선택할 수 있습니다.

- 이 객체는 배열과 유사하게 인덱스를 사용하여 개별 요소에 접근할 수 있다.

- 예를 들어, 밑의 예시에서는 클래스 이름이 "my-class"인 <div> 요소들을 선택하기 위해 getElementsByClassName("my-class")를 사용한다. 반환된 요소들은 HTMLCollection으로 반환된다. 그런 다음 for 루프를 사용하여 반환된 요소들에 접근하고, 각 요소의 textContent를 출력한다. 이 예시에서는 클래스 이름이 "my-class"인 3개의 <div> 요소가 있으며, for 루프를 사용하여 각 요소의 내용을 출력한다. 출력 결과는 "Element 1", "Element 2", "Element 3" 가 된다.

사용 예시 →

<body>

<div class="my-class">Element 1</div>
<div class="my-class">Element 2</div>
<div class="my-class">Element 3</div>

<script>
// 클래스 이름으로 요소 선택하기
var elements = document.getElementsByClassName("my-class");

// 반환된 요소들에 접근하기
for (var i = 0; i < elements.length; i++) {
  var element = elements[i];
  console.log(element.textContent);
}
</script>

</body>

정리하자면, `className` 은 속성(property)으로서 특정 요소의 클래스를 조작하는 데 사용되고, `getElementsByClassName` 은 메서드(method) 로서 클래스 이름을 기반으로 요소들을 선택하는 데 사용된다!

저작자표시 (새창열림)

'Deveolpment Study🗂️ > Javascript' 카테고리의 다른 글

[JS] 동적으로 생성한 <option>태그의 value 가져오기 (0)	2023.06.07
[JS] <option>태그에는 <a>태그를 사용할 수 없을 때 ?_`onchange` (0)	2023.06.07
[JS] 삭제하기 이벤트 - 최소 하나의 행은 남겨두기! (0)	2023.06.02
[JS] `var` 과 `let`의 차이점? + 호이스팅(Hoisting)이란? (0)	2023.06.01
[JS] for문과 forEach문의 차이? + "-1로 초기화 하는 이유" (0)	2023.06.01

'Deveolpment Study🗂️/Javascript' Related Articles

bom's happy life

[JS] className 속성 / getElementsByClassName메서드 본문

[JS] className 속성 / getElementsByClassName메서드

1. className 속성(property)

2. getElementsByClassName 메서드(method)

'Deveolpment Study🗂️ > Javascript' 카테고리의 다른 글

티스토리툴바