Learning-Archive/HTML/WebProgramming/select_all.html at main · GthingkingG/Learning-Archive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>DOM Basic</title>
<script>
    // 이벤트를 연결합니다.
    window.onload = function () {
        // 문서 객체를 선택합니다.
        let headers = document.querySelectorAll('h1');

        for (let i = 0; i < headers.length; i++) {
            // 변수를 선언합니다.
            let header = headers[i];
            // 문서 객체를 조작합니다.
            header.style.color = 'orange';
            header.style.background = 'red';
            header.innerHTML = 'From JavaScript';
            if (i==2) {
                header.style.color = 'blue';
                header.style.background = 'yellow';
                header.innerHTML = 'From Script';
            }
        }
    };
</script>
</head>
<body>
    <h1>Header</h1>
    <h1>Header</h1>
    <h1>Header</h1>
</body>
</html>
//스타일시트에 조건문 사용