자바스크립트 요소찾는 방법

자바스크립트 dom 에서 요소찾는 방법을 알아보겠습니다.

대체로 사용하는 방법에는 3가지가 있습니다.

1. getElementsByTagName 로 찾기

2. getElementsByClassName  로 찾기

3. getElementById 로 찾기



html 은 아래처럼 되어 있다고 가정합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>요소찾기</title>
</head>
<body>
<div id="container">
	<p id="one" class="pClass">p id="one"</p>
	<p id="two" class="pClass">p id="two"</p>
	<p id="three" class="pClass">p id="three"</p>
</div>
</body>
</html>


1. getElementsByTagName 로 찾기.

대체로 아래처럼 찾습니다.

window.onload=function(){

	var pTag = window.document.getElementsByTagName("p");

}

여기서 window.onload=function(){} 부분은 dom 이 로드가 되면이라는 뜻입니다.

앞으로의 예제는 위처럼 window.onload=function(){ 안에 코드가 있다고 생각하면 됩니다.


이 코드에서 보면 p 태그를 getElementsByTagName 로 찾아서 변수 pTag 에 넣습니다.

여기까지가 찾은겁니다.

예를들어 border 같은 스타일을 지정하려면 아래처럼 하면 됩니다.

pTag.style.border= "1px solid #ccc";

만약 몇개가 있는지 알려면 아래처럼 하면 됩니다.

alert("전체문서에서 pTag 엘러먼트 갯수 : "+pTag.length);

길이를 알아보는 length를 사용하면 됩니다.


2. getElementsByClassName 로 찾기

글자를 보시면 알겠지만 주의해야 합니다. tagname, classname 는 elements 고, byid 는 element 입니다. s 가 없어요. 주의해서 보시기 바랍니다.

똑같은 방법으로 class를 찾는 방법입니다.


var pTag = window.document.getElementsByClassName("pClass");

이렇게되면 클래스로 pClass 를 갖는 엘리먼트를 찾습니다. 위의 html 예제에서는 p 태그에만 pClass 가 잇지만 클래스는 div, input,img ... 등등 모든곳에 사용할 수 있습니다.

스타일을 지정하거나 따로 할일은 위처럼 똑같이 사용하면 됩니다.


3. getElementById 로 찾기.

이것도 자주 사용합니다. 아이디를 알고 있으면 아이디로 선택해서 찾는 방법입니다.

가장 빠른 방법이기도 하지요.

var pTag = window.document.getElementById("two");

아이디가 two 를 찾습니다. 위와 같이 변수 pTag에 담습니다.

여기까지가 찾는 방법입니다.



[Code/javascript] - 자바스크립트 부모,자식,형제 찾기


개    개