[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>









반응형
저작자표시 비영리 변경금지

'develop > javascript' 카테고리의 다른 글

[javascript] Date() 함수에서 날짜 형식 출력 하는 방법  (1) 2017.11.03
[javascript] URL 에서 파라메터(Parameter) 추출 하는 방법  (4) 2017.11.03
[javascript] 배열(array) 의 push(), pop(), unshift(), shift() 함수 사용하는 방법  (0) 2017.10.26
[javascript] replace 를 replaceAll 처럼 사용하는 방법  (0) 2017.10.25
[jQuery] 라디오(radio) 버튼, 체크박스(checkbox) 선택/해제 하는 방법  (0) 2017.09.28
TAGS.

Comments