바닐라스크립트에서 selector 사용법

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

 

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

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

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

 

.getElementById() 사용하는 방법

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

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

 

 

.getElementsByName() 사용하는 방법

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

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

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

 

.getElementsByTagName() 사용하는 방법

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

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

<script>
.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>

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

<script>
	var input = document.getElementsByTagName('input')[0];
</script>

 

 

.getElementsByClassName() 사용하는 방법

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

<div class="myStyle"> my Division </div>
<p class="myStyle"> my Paragraph </p>

<button onclick="useClassName()"> Click me </button>
<p id="demo"></p>

<script>
function useClassName (){ 
	var tags = document.getElementsByClassName( "myStyle" ); 
	var text = tags[ 0 ].innerHTML; 

	document.getElementById ( "demo" ).innerHTML = text; 
} 
</script>

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

<script>
	var input = document.getElementsByClassName('fruits')[0];
</script>

 

 

 

 

위 소스에서 스크립트가 input 태그보다 아래에 있다는 것에 주목하자, getElementById 태그가 실행되기 전에 input 태그가 로드되어 있어야 한다.

 

출처 : https://electronic-moongchi.tistory.com/79