자바스크립트와 HTML

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

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

위와 같은 HTML 문서에서 <div>와 같은 태그들은 element 영역이다.

HTML DOM 태그에 접근 및 제어를 위해서 자바스크립트는 아래 처럼 다양한 기능을 제공한다.

document.getElementsClassName(“study”) : 태그의 class 속성 값이 ‘study’로 되어있는 모든 태그 정보를 불러온다.

document.getElementsName(“js”) : 태그의 name 속성 값이 ‘js’로 되어있는 모든 태그 정보를 불러온다.

document.getElementsTagName(“div”) : 태그명이 ‘div’로 되어있는 모든 태그 정보를 불러온다.

모두 태그에 대한 정보를 불러올 수 있는 자바스크립트 접근 메서드 들이다.

태그 정보를 불러오면 자바스크립트의 객체형태로 정보가 담기게 된다.

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

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