웹 개발/Javascript

[Javascript] 자바스크립트, DOM 태그 검색 방식( id, class, name, 태그명)

코딩하는흑구 2019. 4. 18. 00:03

자바스크립트 수행

1. 태그검색 -> 2. 이벤트 추가 -> 3. 태그검색 -> 4. 태그 조작

- 검색 & 조작에 사용된 도구 : BOM

- 검색 & 조작에 사용된 도구 : DOM

★ BOM 

- 미리 정해져 있는 트리구조를 사용(일부 태그만 제어 가능)

- 태그마다 정해져있는 속성이 있다.

★ DOM

- Document Object model

- 트리구조 사용 -> 해당 페이지의 소스에 의해서 결정된다.

- 모든 태그에 접근 가능(**********)

- 모든 태그마다 동일한 속성을 제공한다.


DOM을 이용해 태그를 잡는 방법


1
2
3
4
5
6
7
8
9
10
11
<body>
    <form name="form1">
        <input type="button" name="btn1" id="btn1" value="버튼1" />
        <input type="button" name="btn2" id="btn2" value="버튼2" />
        <hr />
        <input type="button" name="btna" id="btna" value="버튼A" class="btn"/>
        <input type="button" name="btnb" id="btnb" value="버튼B" />
        <input type="button" name="btnc" id="btnc" value="버튼C" class="btn"/>
    </form>
    <input type="button" name="btnd" id="btnd" value="버튼D" class="btn"/>
</body>
cs


다음과 같은 body의 태그구조가 있다고 할때


(1) name속성으로 검색 - 배열반환

var btna = document.getElementsByName("btna"); -> 여기서는 name이 btna인 버튼이 1개뿐이므로 길이가 1인 배열 반환.


btna[0].onclick = function(){

alert("A");

}; 이런식으로 이벤트를 건다.



(2) b. id검색 - 단일객체반환

var btnb = document.getElementById("btnb"); -> id는 유니크(DB의 primary key처럼)해야 하므로 단일객체를 반환함.

btnb.onclick = function(){

alert("B");

}; 단일객체이므로 배열처럼 접근안하고 바로 접근하면 된다.


(3) class 검색 - 배열반환

var btn = document.getElementsByClassName("btn"); -> 클래스명이 btn인 태그들을 모두 가져온다. -> 버튼만 가져오는게 아님.


for(var i =0; i<btn.length; i++){

btn[i].onclick = function(){

alert("Class");

}; class ="btn" 인 태그에 클릭이벤트 걸기

}


(4) tagName 검색 - 배열반환

var input=document.getElementsByTagName("input"); -> 태그의 이름(<input>,<div>)이 input인 태그들 가져오기.

for(var i =0; i<input.length; i++){

input[i].value="Button";

}