자바스크립트 - 제어대상 찾기 (dom요소 찾기)

2019. 2. 27. 09:50

문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다.

1.html 태그로 선택하는 방법

상위요소에서 하위요소 선택방법

document.getElementsByTagName('태그')

태그들을 유사배열로 만들어 준다

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>
		</ol>		
         <ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>
		</ol>
	</body>
	<script>  // document.getElementsByTagName('xx') 하면 xx들을 유사배열로 만들어준다
		var ul = document.getElementsByTagName('ol')[0]; //document 를 이용하여 ol요소들중[0]을 객체에 저장한다
 		var lis = ul.getElementsByTagName('li'); //ul[0]의 요소들 중의 li 를 갖고있는 요소들의 집합
		for(var i=0; i <lis.length-1; i++){
			lis[i].style.color='red';
		}
	</script>
</html>

2.class Name으로 선택하는 방법

document.getElementsByClassName('클래스명')

클래스명들을 유사배열로 만들어 준다

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<ul>
			<li>HTML</li>
			<li class="active">CSS</li>
			<li class="active">JavaScript</li>
		</ul>
		<ol>
			<li>HTML</li>
			<li class="active">CSS</li>
			<li class="active">JAVASCRIPT</li>
		</ol>		
		<ol>
			<li>HTML</li>
			<li>CSS</li>
			<li>JAVASCRIPT</li>
		</ol>
	</body>
	<script>
		var ul = document.getElementsByTagName('ol')[0];
		var lis = ul.getElementsByTagName('li');
		for(var i=0; i <lis.length-1; i++){
			lis[i].style.color='red';
		}
		
		var lis2 = document.getElementsByClassName('active'); 
		//active 란 이름을가진 클래스이름들을 유사배열로 만든다
		 
		lis2[0].style.color = 'blue'; //유사배열들중 0번째 .style의.color을 blue로 바꿔준다
		lis2[1].style.color = 'blue';
		lis2[2].style.color = 'blue';
		lis2[3].style.color = 'blue';
	</script>
</html>

3. ID 로 선택하는 방법

가장 많이 쓰이고 가장 우수한 성능을 자랑한다.

이걸 사용할수있다면 가급적 이걸로 사용하는게 좋다

ID는 문서의 유일한 값으로 표시되기 때문에

getElements 가아닌 getElement 를 사용한다 (유사배열이 아닌 1개만 선택된다)

document.getElementById('아이디')

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<ul>
			<li id="act">HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>

	</body>
	<script>
		var li = document.getElementById('act'); //act 란 이름을가진 ID를 선택한다
			li.style.color='red';
	</script>
</html>

4. CSS 선택자의 문법으로 선택하는 방법

1. document.querySelector('.sa') : 클래스의 이름이 sa 엘리먼트중 맨 첫번째 만을 찾는다

2. document.querySelectorAll('li') : li 태그 요소들을 전부 유사배열로 만든다

' ' 안에 이름을 넣을때

. 을 넣어서 쓰면 className을 찾고

#을 넣을경운 id 값을 찾고

그냥 넣엇을 경우엔 태그를 찾는다

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<ol>
			<li id="act">HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ol>
		<ul>
			<li id="act">HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>

	</body>
	<script>
		var ul = document.querySelector('li'); 
			//li 엘리먼트중 맨위에 첫번째 객체만을 담는다
			ul.style.color='red';
		var ol = document.querySelectorAll('ol');
			//ol 엘리먼트들을 유사배열로 만든다
			ol[0].style.color='blue';
	</script>
</html>

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 공부내용 정리 (0)	2019.02.27
자바스크립트 공부내용정리(2) (0)	2019.02.27
JavaScript - .map , ELEMENT (0)	2019.02.27
JavaScript - NODE 객체 (0)	2019.02.27
javascript - let,var,const 차이 (0)	2019.02.27

아빠개발자의 노트

자바스크립트 - 제어대상 찾기 (dom요소 찾기)

'프로그래밍 > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바