[JavaScript] JavaScript – DOM 요소 선택하기
- 웹 프로그래밍/JavaScript
- 2020. 12. 31. 00:00
안녕하세요.
오늘은 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
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| VS Code 에서 JavaScript 실행하기 (0) | 2023.05.19 |
|---|---|
| [JavaScript] 디데이(D-Day) 구하기 (0) | 2022.12.19 |
| [JavaScript] JavaScript – Array를 반복적으로 참조하는 메서드 (0) | 2020.12.30 |
| [JavaScript] JavaScript – Array 메서드 사용 방법 (0) | 2020.12.29 |
| [JavaScript] JavaScript – reduce 함수 (0) | 2020.12.29 |
