DOM

DOM이란?

DOM(Document Object Model)은 HTML문서나 XML문서에 접근하기 위한 일종의 인터페이스를 의미한다.

이 모델은 문서 내의 모든 요소의 목적과 특징을 정의하고 각 요소에 접근하는 방법을 제시한다.

출저 : http://www.tcpschool.com/ajax/ajax_basic_dom

DOM 요소 선택

1. getElementBtId()
파라미터로 찾으려는 ID를 전달해서 해당 element를 찾는 방법

document.getElementById();

2. getElementsByClassName()
클래스 이름으로 element를 찾아서, 이 클래스 이름을 가지는 모든 element목록을 리턴(복수형)
따라서 자세히 보면Elements 이다.
다수의 이름을 구분하는 경우 스패이스로 구분한다.

단수의 이름 구분
document.getElementsByClassName('my_class');
다수의 이름 구분
document.getElementsByClassName('name name1');

3. getElementByTagName()
'div' 태그를 가지는 모든 element 목록을 찾아준다.
다수의 element를 리턴하기 때문에 함수명에 복수형의 'elements'가 포함되어 있다.

document.getElementsByTagName('div);

4. querySelector()
이 함수는 파라미터로 입력받은 CSS선택자를 사용해서, element를 찾는다.
파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴

• ID로 찾기

  document.querySelector('#div_1');

• Class 이름으로 찾기
  class가 'my_class'인 element 중 첫번째 element를 리턴

  document.querySelector('.my_class');

• Tag 이름으로 찾기
  div태그를 가지는 element 중 첫번째 element를 리턴

  document.querySelector('div');