자바스크립트 DOM 객체 다루기

 자바스크립트를 이용하여서 웹 문서의 객체를 다루는 방법이다.

일단, 객체를 다루기 위해서는 그 객체를 자바스크립트에서 지정할줄 알아야 하기 때문에 먼저 객체를 변수에 담는 방법부터 다루도록 하겠습니다.

태그를 통해서 가져오기

변수 = document.getElementsByTagName('태그명')

태그명에 해당하는 모든 태그를 반환합니다.

반환되는 것은 문서객체의 배열입니다.

ID 속성을 통해서 가져오기

document.getElementById('id명')

해당 아이디가 적용된 객체를 반환합니다.

반환되는 것은 문서객체 입니다.

Class속성을 통해서 가져오기

document.getElementsByClassName('클래스명')

해당 클래스가 적용된 모든 객체를 반환합니다.

반환되는 것은 문서객체의 배열입니다.

CSS선택자를 통해서 가져오기

document.querySelector('선택자')

선택자에 맞는 객체를 반환합니다.

반환 되는 것은 문서객체 입니다.

(단 하나만 반환되는 것에 주의하고, 전부 반환은 querySelectorAll을 사용할 것.)

CSS선택자를 통해서 모두 가져오기

document.querySelectorAll('선택자')

선택자에 맞는 객체들을 모두 반환합니다.

반환 되는 것은 문서객체의 배열입니다.