JavaScript_STUDY/Javascript16.html at master · CreativePersonDW/JavaScript_STUDY · 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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<html lang="ko">
    <head>
        <title>DOM</title>
        <style>
            .area{
                background: lightgray;
                border: 1px solid black;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <h1>DOM(Document Object Model)</h1>
        <h3>텍스트 노드가 있는 노드 생성</h3>
        <button onclick="test1();">실행확인</button>
        <div id="area1" class="area"></div>
        <script>
            function test1(){
                // element 생성
                var title = document.createElement("h3");
                // textNode 생성
                var textNode = document.createTextNode("안녕? 반가워!");

                // 노드를 연결
                title.appendChild(textNode); // title = <h3>안녕? 반가워!</h3>

                document.getElementById("area1").appendChild(title);
            }
        </script>
        <hr>
        <h3>텍스트 노드가 없는 노드 생성</h3>
        <button onclick="test2();">실행확인</button>
        <div id = "area2" class="area"></div>
        <script>
            function test2(){
                // img 태그 생성
                var imgTest = document.createElement('img');

                // 속성 지정
                imgTest.src = 'https://upload.wikimedia.org/wikipedia/ko/thumb/d/d4/%ED%8E%AD%EC%88%98.jpg/300px-%ED%8E%AD%EC%88%98.jpg';
                imgTest.width = '150';
                imgTest.height = '100';

                // 기존에 없는 속성 만들어 주기(참고)
                // imgTest.myProperty = "123"; // 이건 안된다.
                imgTest.setAttribute('myProperty', 123) // 이건 된다.

                document.getElementById("area2").appendChild(imgTest);
            }
        </script>

        <hr>

        <h3>innerHTML</h3>
        <button onclick="test3();">실행확인</button>
        <div id="area3" class="area">
            <table id="board">
                <tr>
                    <th>글번호</th>
                    <th>글제목</th>
                    <th>작성자</th>
                    <th>조회수</th>
                    <th>작성일자</th>
                </tr>
            </table>
        </div>
        <script>
            function test3(){
                var board = document.getElementById("board");

                var num = '1';
                var title = '제목입니다.';
                var user = 'user01';
                var count = 1;
                var date = new Date();

                // 시작과 끝지점을 가리킨다.
                board.innerHTML += "<tr><td>" + num + "<td>"
                                    + "<td>" + title + "<td>"
                                    + "<td>" + user + "<td>"
                                    + "<td>" + count + "<td>"
                                    + "<td>" + date.getFullYear() + '-'
                                    + (date.getMonth()+1) + '-'
                                    + date.getDate() + "<td><tr>";
            }
        </script>

        <hr>

        <h3>스타일 지정</h3>
        <button onclick="test4();">실행확인</button>
        <div id="area4" class="area"></div>
        <script>
            function test4(){
                var area4 = document.getElementById("area4");

                area4.style.backgroundColor = "orangered";
                area4.style.borderRadius = "50px";
                area4.style.transition = "all 2s";

            }
        </script>

        <hr>

        <h3>노드 삭제</h3>
        <button onclick="test5();">실행확인</button>
        <div id="area5" class="area"></div>
        <script>
            function test5(){
                var area5 = document.getElementById("area5");
                area5.remove();
            }
        </script>


    </body>

</html>