• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript Node List</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>노드 리스트의 length 속성</h1>
12
    <ul id="list">
13
        <li>첫 번째 아이템이에요!</li>
14
        <li>두 번째 아이템이에요!</li>
15
        <li>세 번째 아이템이에요!</li>
16
    </ul>
17
    <p id="text"></p>
18
    <button onclick="changeTextColor()">글자색 변경!</button>
19
​
20
    <script>
21
        var listItems = document.getElementsByTagName("li");    // 모든 <li> 요소들을 선택함.
22
        document.getElementById("text").innerHTML =
23
            "이 노드 리스트의 길이는 " + listItems.length + "개 입니다.<br>"; // 모든 자식 노드들의 개수를 반환함.
24
​
25
        function changeTextColor() {
26
            for (var i = 0; i < listItems.length; i++) {
27
            listItems[i].style.color = "orange";    // 모든 자식 노드들의 글자색을 변경함.
28
            }
29
        }
30
    </script>
31
32
</body>
33
​
34
</html>