document

첫번째 문단

두번째 문단

세번째 문단

네번째 문단

08-03_document

document

첫번째 문단

두번째 문단

세번째 문단

네번째 문단

08-03_document

document

첫번째 문단

두번째 문단

세번째 문단

네번째 문단

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08-03_document</title>
<style type="text/css">
body {
	font-size: 24px;
}
</style>
</head>
<body>
	<h1>document</h1>
	<p class="para">첫번째 문단</p>
	<p class="para">두번째 문단</p>
	<p class="para">세번째 문단</p>
	<p> 네번째 문단 </p>
	
	<script type="text/javascript">
	/*
		# getElementsByTagName()
		- 특정 태그를 가진 모든 요소 선택. 선택된 요소는 배열 객체로 반환.
	*/
	let select = document.getElementsByTagName('p');
	document.write('select : ' + select + '<br/>');
	
	let p1 = document.getElementsByTagName('p')[1]; // 두번째 p 태그 선택.
	document.write('<p> p1 :' + p1 + '</p>');
	document.getElementsByTagName('p')[2].style.color='blue'; // 세번쨰 p 태그 선택
	
	document.querySelector('.para').style.color='red';
	
	/*
		# querySElectorAll()
		- 특정 CSS 선택자를 가진 모든 요소를 선택해서 배열로 반환.
	*/
	let pAll = document.querySelectorAll('.para');
	for(let i=0; i<pAll.length; i++){
		pAll[i].style.fontWeight='bold';
		pAll[i].style.fontSize='20px';
		document.write(pAll[i]);
	}
	
	</script>
</body>
</html>