[javascript] .getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 사용하는 방법

반응형





[javascript] .getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 사용하는 방법



자바스크립트에서 HTML 문서의 객체를 가져올때 사용되는 함수는

.getElementById(), .getElementsByName(), .getElementsByTagName(), .getElementsByClassName() 가 있다.


아래 예제들을 통해 자세히 확인 해 보자.




.getElementById() 사용하는 방법

  • 문서객체 중 ID 값을 가져오는데 사용되는 함수 이다.


<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<div id="fruit_1">apple</div>

<div id="fruit_2">banana</div>


    <script>

// 문서 객체를 가져온다.

var fruit1 = document.getElementById('fruit_1');

var fruit2 = document.getElementById('fruit_2');


// 문서 객체의 속성을 변경 한다.

fruit1.innerHTML = 'with getElementByID()';

fruit2.innerHTML = 'with getElementByID()';

    </script>


</body>

</html>





.getElementsByName() 사용하는 방법

  • 문서객체 중 NAME 값을 가져오는데 사용되는 함수 이다.
  • 읽은 객체는 배열로 저장 된다.


<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<input type="text" name="fruits" value="apple" size="10">

<input type="text" name="fruits" value="banana" size="10">

<input type="text" name="fruits" value="orange" size="10">

<input type="text" name="fruits" value="berry" size="10">

<input type="text" name="fruits" value="melon" size="10">


    <script>

window.onload = function () {

alert(document.getElementsByName("fruits").length);


var array_fruits = document.getElementsByName("fruits");


//변수 array_fruits 는 문서 객체를 가지는 배열로 들어 간다.

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

alert(array_fruits[i].value);

}

}

    </script>


</body>

</html>





.getElementsByTagName() 사용하는 방법

  • 문서객체 중 지정된 태그(Tag)값을 가져오는데 사용되는 함수 이다.
  • 읽은 객체는 배열로 저장 된다.


<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<input type="text" name="fruits" value="apple" size="10">

<input type="text" name="fruits" value="banana" size="10">

<input type="text" name="fruits" value="orange" size="10">

<input type="text" name="fruits" value="berry" size="10">

<input type="text" name="fruits" value="melon" size="10">


    <script>

window.onload = function () {

alert(document.getElementsByTagName("input").length);


var array_fruits = document.getElementsByTagName("input");


//변수 array_fruits 는 문서 객체를 가지는 배열로 들어 간다.

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

alert(array_fruits[i].value);

}

}

    </script>


</body>

</html>





.getElementsByClassName() 사용하는 방법

  • 문서객체 중 지정된 클래스(Class)값을 가져오는데 사용되는 함수 이다.
  • 읽은 객체는 배열로 저장 된다.

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>


<input type="text" name="fruits" class="items" value="apple" size="10">

<input type="text" name="fruits" class="items" value="banana" size="10">

<input type="text" name="fruits" class="items" value="orange" size="10">

<input type="text" name="fruits" class="items" value="berry" size="10">

<input type="text" name="fruits" class="items" value="melon" size="10">


    <script>

window.onload = function () {

alert(document.getElementsByClassName("items").length);


var array_fruits = document.getElementsByClassName("items");


//변수 array_fruits 는 문서 객체를 가지는 배열로 들어 간다.

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

alert(array_fruits[i].value);

}

}

    </script>


</body>

</html>









반응형
TAGS.

Comments