[Javascript] 자바스크립트, DOM 태그 검색 방식( id, class, name, 태그명)
자바스크립트 수행
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";
}