<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName()</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="tag-name.js"></script>
    </body>
</html>
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

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

/* 방법 2 - for 문 적용 */
for (let i = 0; i < liElements.length; i++) { // length 속성 사용 가능
    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.getElementsByTagName(name)

// 특정 요소 내에서
element.getElementsByTagName(name)
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName("*")</title>
    </head>
    <body>
        <h1>getElementsByTagName("*")</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const allElements = document.getElementsByTagName("*");
            console.log(allElements);
            // HTMLCollection(10) [html, head, meta, title, body, ul, li, li, li, script]
        </script>
    </body>
</html>
getElementsByTagName(name)[n]
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName()[n]</title>
    </head>
    <body>
        <h1>getElementsByTagName()[n]</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
            
            /* HTML 문서 내의 <li> 태그의 첫 번째 요소 */
            console.log(liElements[0].textContent); // 0부터 시작하는 인덱스로 접근
            // 출력: "김밥"
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByTagName().length</title>
    </head>
    <body>
        <h1>getElementsByTagName().length</h1>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script>
            const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
            console.log(liElements.length); // 3
        </script>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>element.getElementsByTagName()</title>
    </head>
    <body>
        <h1>element.getElementsByTagName()</h1>
        <h2>분식점 메뉴</h2>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <h2>중국집 메뉴</h2>
        <div id="cn-food">
            <ul>
                <li>짜장면</li>
                <li>짬뽕</li>
                <li>탕수육</li>
            </ul>
        </div>
        <script>
            const cnFood = document.getElementById("cn-food");

            // id가 "cn-food"인 요소 내에서 li 태그를 모두 선택
            const cnFoodLiElements = cnFood.getElementsByTagName("li");
            
            // 찾은 모든 요소 중에서 첫 번째 요소의 텍스트 콘텐트 출력
            console.log(cnFoodLiElements[0].textContent); // "짜장면"
        </script>
    </body>
</html>