KH정보교육원_웹 프로그래머 과정/JavaScript

태그 접근하기

calvin9150 2021. 4. 7. 16:06
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>태그접근하기</title>
</head>
<body>
    <h1>태그에 접근하는방법</h1>    
    <p>
        document객체의 매소드를 이용해서 접근을 할 수 있다.
        js에서는 페이지자체를 하나의 객체로 보고 페이지내부의 태그들도 모두 단일 객체로 본다(DOM)
        태그에 접근하는 방법은 기본 4가지가 있음
    </p>
    <ul>
        <li>id값을 기준으로 태그 한개를 가져오는 방법 : getElementById()</li>
        <li>class값을 기준으로 다수태그를 가져오는 방법 : getElementsByClassName()</li>
        <li>tagName값을 기준으로 다수태그를 가져오는 방법 : getElementsByTagName()</li>
        <li>namer값을 기준으로 다수태그를 가져오는 방법 : getElementsByName()</li>
    </ul>
    <p>
        다수태그를 가져오는 매소드는 배열(List)방식의 객체를 반환
        한개태그를 가져오는 매소드는 태그(Element객체)를 반환함
    </p>
 
    <h3>id값을 기준으로 태그 가져오기</h3>
    <p>
        태그의 id속성의 값을 기준으로 한개의 태그만 가져옴
        document.getElementById("id값"); -> html태그중 id값이 인수값과 같은 태그를 가져옴
    </p>
    <div id="test">div1</div>
    <div id="test">div2</div>
    <script>
        var el=document.getElementById("test");
        console.log(el);
        console.dir(el);
        el.innerHTML="마지막시간";
        el.style.color="red";
    </script>
 
    <h2>class속성을 기준으로 태그를 가져오기</h2>
    <p>
        태그의 class속성에 있는 값을 기준으로 태그를 객체로 가져오는 함수
        태그의 class속성은 페이지에서 중복이 가능하다. -> 여러값을 가져올 수 있다.
        여러 태그객체가 반환됨(자바의 List객체랑 비슷한 방식의 객체가 반환됨)
        document.getElementsByClassName("class속성값");
    </p>
    
    <p class="p1">p1</p>
    <p>p2</p>
    <div class="p1">div 1</div>
    <div>div 2</div>
    <div class="p1">div 3</div>
    <div>div 4</div>
    <p class="p1">p3</p>
    <h3 class="a b p1">h3</h3>
    <script>
        //class값에 해당하는 태그를 배열형태의 객체로 가져옴
        console.log(document.getElementsByClassName("p1"));
        var els=document.getElementsByClassName("p1");
        //els.innerHTML="바꿔 모든걸 다 바꿔!";
        //복수로 넘어온 태그는 인덱스번호로 접근해서 처리함. -> 배열방식!
        els[0].innerHTML="내가 바꿨지롱";
        els[0].style.backgroundColor="green";
        //Element
    </script>
 
    <h3>태그명을 기준으로 가져오기</h3>
    <p>
        document.getElementsByTagName("태그명");
        페이지에 있는 동일한 태그 모두를 가져옴.
    </p>
    <ul>
        <li>u1</li>
        <li>u2</li>
        <li>u3</li>
        <li>u4</li>
        <li>u5</li>
    </ul>
    <ol>
        <li>o1</li>
        <li>o2</li>
        <li>o3</li>
        <li>o4</li>
        <li>o5</li>
    </ol>
    <script>
        var list=document.getElementsByTagName("li");
        console.log(list);
    </script>
 
 
 
</body>
</html>
 
cs