본문 바로가기
Javascript

Javascript - getElementsByTagName, getElementsById, getElementsByClassName으로 HTML Element 찾기

by Dokon Jang 2017. 3. 24.
반응형

자바스크립트로 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>
 

 

반응형

댓글