class를 이용한 요소 노드 취득
Document.prototype / Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든요소 노드들을 탐색하여 반환
인수로 전달할 classs 값은 공백으로 구분하여 여려개의 class를 지정할 수 있음
getElementsByTagName 메서드와 마찬가지로 여러개의 요소 노드 객체를 갖는 DOM 컬렉션 객체인 HTMLCollection
getElementsByTagName 과 마찬가지로 Document.prototype에 정의된 메서드와 ELement.prototype에 정의된 메서드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM - Create & Add Node</title>
</head>
<body>
<ul>
<li class="fruit apple">Apple</li>
<li class="fruit banana">Banana</li>
<li class="fruit orange">Orange</li>
</ul>
<script>
/*
*/
// class 값이 'fruit'인 요소를 모두 탐색하여 HTMLCollection 객체에 담아 반환
const elems = document.getElementsByClassName('fruit');
// 취득한 모든 요소의 CSS color 프로퍼티 값을 변경
[...elems].forEach(elem => {elem.style.color = 'red';});
// class 값이 'fruit apple'인 요소 노드를 모두 탐색하여 HTMLCollection 객체에 담아 반환
const apples = document.getElementsByClassName('fruit apple');
// 취득한 모든 요소의 CSS color 프로퍼티 값을 변경
[...apples].forEach(elem => {elem.style.color = 'blue';});
</script>
</body>
</html>
