자바스크립트의 HTML 접근 메서드

자바스크립트는 HTML DOM(Document Object Model) 표준을 활용하여 HTML 태그에 인터페이스하여 직접 제어할 수 있도록 해준다.

<div class='study' name='js' >
  <p id='1'>
  <p id='2'>
</div>

 

 

위와 같은 코드가 있다고 생각해보자 <div> 태그는 element 영역이기 때문에 해당 태그에 접근하기 위해서는 다양한 방식의 메서드를 사용할 수 있다.

 

document.getElementsClassName("study") - 태그의 class 속성의 값이 'study'로 되어있는 모든 태그 정보를 불러온다. 

document.getElementsName("js") - 태그의 name 속성의 값이 'js'로 되어있는 모든 태그 정보를 불러온다. 

document.getElementsTagName("div") - 태그명이 'div'로 되어있는 모든 태그 정보를 불러온다. 

 

위의 메서드들은 모두 div태그 정보를 불러올 수 있는 접근 메서드 들이다. 해당 메서드들로 태그 정보를 불러오면 자바스크립트의 객체형태로 저장되어 불러와진다.

 

document.getElementsClassName("study") 메서드를 실행하면 document 내에 있는 모든 class 속성의 값이 'study'인 태그 정보들을 불러오게 된다. 즉, 기본적으로 한 개가 아닌 여러 개의 태그 정보를 불러오는 메서드 이므로 HTML Collection 형태임을 알 수 있다.

Collection 내부에는 class속성이 'study'인 태그 정보들이 객체 형태로 배열화 되어있는 것을 확인할 수 있다.

 

계속...