[Javascript] 자바스크립트, DOM 태그 검색 방식( id, class, name, 태그명)
- 웹 개발/Javascript
- 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";
}
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트에서 매개변수(parameter) 할당 (0) | 2019.06.16 |
|---|---|
| [Javascript] 자바스크립트 스코프와 호이스팅 (0) | 2019.05.28 |
| [Javascript] 자바스크립트, location, history 객체 (1) | 2019.04.15 |
| [Javascript] 자바스크립트, window 객체로 새창 띄우기(자식창 띄우기) (0) | 2019.04.15 |
| [Javascript] 자바스크립트 HTML 태그 속성 제어, window onload 함수(BOM) (1) | 2019.04.07 |