document_js

- DOM(Document Object Model) 문서 객체

- document API를 활용하여 문서를 다룬다.

- documnet API를 활용하여 HTML 객체 생성, 소멸과 HTML 요소의 속성 생성, 소멸을 할 수 있다.

- documnet API를 활용 HTML 요소를 검색하여 이벤트 등록 및 문서 제어가 가능하다.

 

document API html 요소 검색

- 이벤트 등록 및 문서 제어를 하기 위해서는 html 요소가 검색이 되어야 한다.

- 검색된 대상에 이벤트 등록 혹은 제어가 가능해진다.

 

id 검색

- html 요소 중 id 속성 값을 가진 대상을 검색

- 찾고자 하는 id 값과 일치하는 대상을 찾을 수 있다.

- api : document.getElementById('찾을 id');

- 특징 : 동일한 id 값이 여러개 있더라도 1개만 찾아 변환(문서 작성 시 id 값은 유일값을 가질 수 있도록 제작)

<button type="button" id="myBtn">내 버튼</button>
<script type="text/javascript">
	var myBtn=document.getElementById('myBtn');
	console.log(myBtn,'아이디 검색하여 객체 반환');
</script>

 

class

- html 요소 중 class 속성을 가진 대상 검색

- class 속성의 값 중 일치하는 대상 검색

- class의 값은 html 요소 중 여러 대상이 동일한 값을 가질 수 있으므로 검색 후 반환되는 결과값은 배열이다.

- api : document.getElementsByClassName('클래스명');

<style>
.my-Div{width:100px;height:100px;background-color:#000}
</style>
<div class="my-Div"></div>
<div class="my-Div"></div>
<div class="my-Div"></div>
<script type="text/javascript">
var myDiv=document.getElementsByClassName('my-Div');
console.log(myDiv);
//클래스를 검색 했을 경우 배열로 변환되어 오기 때문에
//document api를 활용하기 위해서는 배열 원소(요소)까지 접근해야 한다.
for(var i=0;i<myDiv.length;i++){
	myDiv[i].onclick=function(){
		this.style.background-color='#f00';
	}
}
</script>

 

태그검색

- html 요소 중 tag 명으로 요소를 검색 할 수 있다.

- 동일한 태그가 있을 수 있음으로 검색된 결과값은 배열이다.

- api : document.getElementsByTagName('태그명');

<script type="text/javascript">
	var h3Array=document.getElementsByTagName('h3');
	console.log(h3Array);
	for(var i=0;i<h3Array.length;i++){
		h3Array[i].onclick=function(){
			this.style.color='#f00';
		}
	}
</script>