반응형
자바스크립트로 HTML Element를 찾는 방법입니다.
3가지 방법으로 찾을 수 있는데 보통 ID로 찾는 document.getElementById를 가장 많이 사용합니다.
1. 태그명(Tag Name)으로 HTML Elements 찾기
- 아래의 Javascript로 HTML Elements를 찾을 수 있습니다.
- 주의 할 점은 아래의 함수는 HTML Elements 배열로 리턴합니다.
// Tag Name 태그 찾기
var a = document.getElementsByTagName("tagName");
예제)
<html>
<head>
<script>
function load(){
// input 태그 찾기
var a = document.getElementsByTagName("input");
for(var i = 0 ; i < a.length ; i++){
var inputTag = a[i];
alert(inputTag.value);
}
}
</script>
</head>
<body onLoad="load();">
<input type="text" id="textbox_id" class="cssClass" value="Text Box"/>
<input type="button" id="botton_id" class="cssClass" value="Button"/>
</body>
</html>
2. ID로 HTML Element 찾기
- 아래의 Javascript로 HTML Element를 찾을 수 있습니다.
- 아래의 함수는 HTML Element를 리턴합니다.
- 주의 할 점은 동일한 ID로 지정 된 경우는 하나의 HTML Element만 찾습니다.
// ID로 찾기
var a = document.getElementById("id");예제)
<html>
<head>
<script>
function load(){
// ID로 찾기
var a = document.getElementById("textbox_id");
alert(a.value);
}
</script>
</head>
<body onLoad="load();">
<input type="text" id="textbox_id" class="cssClass" value="Text Box"/>
<input type="button" id="botton_id" class="cssClass" value="Button"/>
</body>
</html>
3. Class로 HTML Elements 찾기
- CSS를 적용하기 위한 Class로 HTML Elements를 찾을 수 있습니다.
- 아래의 함수는 HTML Elements 배열로 리턴합니다.
// Class Name으로 찾기
var a = document.getElementsByClassName("className");
예제)
<html>
<head>
<script>
function load(){
// Class로 찾기
var a = document.getElementsByClassName("cssClass");
for(var i = 0 ; i < a.length ; i++){
var inputTag = a[i];
alert(inputTag.value);
}
}
</script>
</head>
<body onLoad="load();">
<input type="text" id="textbox_id" class="cssClass" value="Text Box"/>
<input type="button" id="botton_id" class="cssClass" value="Button"/>
</body>
</html>
반응형
'Javascript' 카테고리의 다른 글
| [JS] SlickGrid 단순 정렬하기 (0) | 2021.03.12 |
|---|---|
| [JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기 (0) | 2021.02.05 |
| input checkbox 수정 할 수 없게 만들기 (0) | 2017.06.19 |
| Javascript - 메세지박스(Alert, Confirm, Prompt) (0) | 2017.02.21 |
| Javascript - select 태그에 항목(option) 추가 삭제하기. (0) | 2017.02.08 |
댓글