<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName()</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script src="class-name.js"></script>
    </body>
</html>
const liElements = document.getElementsByClassName("a");
console.log(liElements); // HTMLCollection(3) [li.a, li.a, li.a]

/* 방법 1 - for...of 문 적용 */
for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_1 - forEach() 함수 적용 */
const arr = [...liElements]; // 스프레드 문법으로 배열 개체를 만듦
arr.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3_2 - forEach() 함수 적용 */
const liElementsArray = Array.from(liElements); // Array.from() 메서드로 배열 개체를 만듦
liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/
// HTML 문서 전체에서
document.getElementsByClassName(names)

// 특정 요소 내에서
element.getElementsByClassName(names)
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName() - 여러 클래스 이름은 공백으로 구분</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a b c">라면</li>
            <li class="a b">떡볶이</li>
        </ul>
        <script src="test-1.js"></script>
    </body>
</html>
const liElements = document.getElementsByClassName("a b");

for (const liElement of liElements) {
    console.log(liElement.textContent);
}
/*
    "라면"
    "떡볶이"
*/
getElementsByClassName(name)[n]
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName(name)[n]</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByClassName("a");

            /* HTML 문서 내의 a 클래스 이름을 가지는 첫 번째 요소 */
            console.log(liElements[0].textContent); // 0부터 시작하는 인덱스로 접근
            // 출력: "김밥"
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByClassName().length</title>
    </head>
    <body>
        <ul>
            <li class="a">김밥</li>
            <li class="a">라면</li>
            <li class="a">떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByClassName("a");
            console.log(liElements.length); // 3
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>element.getElementsByClassName()</title>
    </head>
    <body>
        <h1>element.getElementsByClassName()</h1>
        <h2>분식점 메뉴</h2>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <h2>중국집 메뉴</h2>
        <div id="cn-food">
            <ul>
                <li class="a">짜장면</li>
                <li class="a">짬뽕</li>
                <li class="a">탕수육</li>
            </ul>
        </div>
        <script>
            const cnFood = document.getElementById("cn-food");

            // id가 "cn-food"인 요소 내에서 a 클래스 이름을 가지고 있는 모든 요소를 찾음
            const cnFoodLiElements = cnFood.getElementsByClassName("a");

            // 찾은 모든 요소 중에서 첫 번째 요소의 텍스트 콘텐트 출력
            console.log(cnFoodLiElements[0].textContent); // "짜장면"
        </script>
    </body>
</html>