document.querySelectorAll("css selectors")
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>
const liElements = document.querySelectorAll("li"); // li 선택자를 모두 선택
console.log(liElements); // NodeList(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++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 방법 3 - forEach() 함수 적용 */
liElements.forEach(li => { // 유사 배열이지만 forEach() 함수 적용이 가능
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/
// HTML 요소를 선택합니다.
const myElement = document.getElementById("myElement");

// myElement의 자식 노드 목록을 가져옵니다.
const childNodes = myElement.childNodes;

// 자식 노드 목록을 순회하며 출력합니다.
for (var i = 0; i < childNodes.length; i++) {
    console.log(childNodes[i]);
}
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>
const liElements = document.querySelectorAll("li");
console.log(liElements); // NodeList(3) [li, li, li]

console.log(liElements.length); // 3

for (let i = 0; i < liElements.length; i++) {
    console.log(liElements[i].textContent);
}
/*
    "김밥"
    "라면"
    "떡볶이"
*/
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="queryselectorall.js"></script>
    </body>
</html>
const liElements = document.querySelectorAll("li");
console.log(liElements); // NodeList(3) [li, li, li]

/* 유사 배열이지만 forEach() 함수 적용이 가능 */
liElements.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

/* 진짜 배열로 변환 */

// Array.from() 메서드
const liElementsArray = Array.from(liElements); // 배열로 변환

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/

// 스프레드 문법 활용
const liElementsArray_1 = [...liElements]; // 배열로 변환
liElementsArray_1.forEach(li => {
    console.log(li.textContent);
});
/*
    "김밥"
    "라면"
    "떡볶이"
*/
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>NodeList</title>     
    </head>
    <body>
        <ul id="list">
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <p><li> 요소의 개수: <strong id="li-length-val">3</strong></p>
        <button type="button" id="addButton">새로운 메뉴 추가</button>
        <script src="none-live.js"></script>
    </body>
</html>
// NodeList 가져오기
const liElements = document.querySelectorAll("li");

// 버튼 클릭 시 새로운 <li> 요소 추가
document.getElementById('addButton').addEventListener("click", () => {
    const newLi = document.createElement('li');
    newLi.textContent = "새로운 메뉴";

    // 새로운 <li> 요소를 <ul>에 추가
    document.getElementById("list").appendChild(newLi);

    // <li> 요소의 개수 실시간 확인
    const liElementsLength = liElements.length; // 이미 선언했던 liElements의 length가 실시간 반영됨
    document.getElementById("li-length-val").textContent = liElementsLength;
});
브라우저에서 실제 표시된 모습 버튼을 클릭해 보세요!
NodeList에 대한 브라우저 호환성
객체와 속성
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
NodeList 1 12 1 1
length 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.