[JavaScript] JavaScript – DOM 요소 선택하기

안녕하세요.

 

오늘은 JavaScript에서 DOM(Document Object Model) 요소를 선택하는 방법에 대해서 알려 드리려고 합니다.

 

JavaScript에서 HTML 요소들을 다루기 위해서는 여러가지 방법이 있는데요.

 

오늘은 그 여러가지 방법들을 어떻게 소스코드 상에서 다루는지 예제 코드를 통해서 보여 드리려고 합니다.

 

우선 방법의 종류는 아래와 같습니다.

 

1. HTML 태그 이름을 이용한 선택

2. 아이디를 이용한 선택

3. 클래스를 이용한 선택

4. name 속성을 이용한 선택

5. CSS 선택자를 이용한 선택

6. HTML 객체 집합을 이용한 선택

 

위의 6가지 방법의 DOM 요소 선택하는 방법들이 있습니다.

 

그럼 위의 6가지 방법의 예제 코드들 작성해서 실행 결과까지 보도록 하겠습니다.

 

예제 코드
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
<html>
    <head>
        <title>HTML 제목 - 범범조조</title>
        <meta charset="utf-8">
 
        <style>
            h1{
                color: blue;
                background-color: burlywood;
            }
 
            h2{
                color: red;
            }
        </style>
    </head>
 
    <body>
       <h1>DOM 요소 선택 하기</h1>
       <br/>
 
       <h2>HTML 태그 이용한 선택</h2>
       <ol>
           <li>첫 번째 리스트</li>
           <li>두 번째 리스트</li>
           <li>세 번째 리스트</li>
           <li>네 번째 리스트</li>
           <li>다섯 번째 리스트</li>
       </ol>
 
       <script>
           var selectItem = document.getElementsByTagName("li");
           for(var idx = 0; idx < selectItem.length; idx++){
               selectItem.item(idx).style.color = "blue";
           }
       </script>
       <br/>
 
       <h2>아이디를 이용한 선택</h2>
        <ol>
            <li id = "test">첫 번째 리스트</li>
            <li>두 번째 리스트</li>
            <li id = "test">세 번째 리스트</li>
            <li>네 번째 리스트</li>
            <li>다섯 번째 리스트</li>
        </ol>
 
        <script>
            var selectItem2 = document.getElementById("test");
            selectItem2.style.color = "blue";
        </script>
       <br/>
 
       <h2>클래스를 이용한 선택</h2>
        <ol>
            <li class = "test">첫 번째 리스트</li>
            <li>두 번째 리스트</li>
            <li class = "test">세 번째 리스트</li>
            <li>네 번째 리스트</li>
            <li>다섯 번째 리스트</li>
        </ol>
 
        <script>
            var selectItem = document.getElementsByClassName("test");
            for(var idx = 0; idx < selectItem.length; idx++){
                selectItem.item(idx).style.color = "red";
            }
        </script>
 
       <br/>
 
       <h2>name 속성을 이용한 선택</h2>
        <ol>
            <li name = "test">첫 번째 리스트</li>
            <li>두 번째 리스트</li>
            <li name = "test">세 번째 리스트</li>
            <li>네 번째 리스트</li>
            <li>다섯 번째 리스트</li>
        </ol>
 
        <script>
            var selectedItem = document.getElementsByName("test");
            for(var idx = 0; idx < selectedItem.length; idx++){
                selectedItem.item(idx).style.color = "red";
            }
        </script>
 
       <br/>
 
       <h2>CSS 선택자를 이용한 선택</h2>
        <ol>
            <li class = "test">첫 번째 리스트</li>
            <li>두 번째 리스트</li>
            <li class = "test">세 번째 리스트</li>
            <li>네 번째 리스트</li>
            <li>다섯 번째 리스트</li>
        </ol>
 
        <script>
            var selectedItem = document.querySelectorAll("li.test");
            for(var idx =0; idx < selectItem.length; idx++){
                selectedItem.item(idx).style.color = "red";
            }
        </script>
       <br/>
 
       <h2>HTML 객체 집합을 이용한 선택</h2>
 
       <script>
           var title = document.title;
           document.write(title + "<br>");
       </script>
       <br/>
    </body>
</html>
cs

 

실행 결과

위와 같이 6가지의 DOM 요소 선택하는 방법들을 일일이 소스코드로 작성해서 적용시켜 보았습니다.

 

감사합니다.

728x90

이 글을 공유하기

댓글

Designed by JB FACTORY