개발자의 길/Javascript

자바스크립트 요소(Element) 찾기

모쿠 2017. 4. 6. 17:15

<자바스크립트를 사용해서 HTML element를 찾는 방법>


* JavaScript를 사용해서 HTML element를 찾는 방법:

 1. getElementById('id')

 2. getElementsByTagName('tagName')

 3. getElemnetsByClassName('className')

 4. CSS 선택자: querySelectorAll('선택자'), querySelector('선택자')

 5. HTML object collection : body, form, images, anchors, ...


<26_getelement.html>


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
#p1 {
    border: 1px solid grey;
}
</style>
</head>
<body>
 
<h1>HTML 요소(element)를 찾는 방법</h1>
<p id="p1">단락1</p>
<p id="p1">단락2</p>
<p class="c1">단락3</p>
<p class="c1">단락4</p>
 
<script type="text/javascript">
document.getElementById('p1').style.backgroundColor = 'pink';
 
// P 태그를 찾아서 배경색 변경
var ps = document.getElementsByTagName('p')
var i;
for(i = 0; i < ps.length; i++ ){
    ps[i].style.backgroundColor = 'lightgreen';
}
 
// class 'c1'을 찾아서 배경색 변경
ps = document.getElementsByClassName('c1');
for(i = 0; i < ps.length; i++){
    ps[i].style.backgroundColor = 'cyan';
}
 
// CSS 선택자를 찾아서 배경색 변경
document.querySelector('.c1').style.backgroundColor = 'yellow'; // 하나만 변경
ps = document.querySelectorAll('.c1'); // 배열형태로 모든 c1 클래스 변경
for(i = 0; i < ps.length; i++){
    ps[i].innerHTML = '꿀잼';
}
 
document.body.style.backgroundColor = 'grey';
 
</script>
</body>
</html>
cs



<출력화면>



저작자표시 비영리