[기초] 자바스크립트 DOM선택자 정리

javascript document selector

Javascript로 현대 모던 자바스크립트 환경에서는 할수 있는것들이 많이 있다.

(서버를 만들다던지 데스크탑 앱을 만든다던지 머신러닝을 한다던지 참으로 많다)

Dom 조작을 하기위해 Javascript로 Dom을 선택해서 바꿀수있는 Dom Selector에 대해서 정리해보았다

 

1. getElementById

가장 많이 쓰는 Dom Selector 메소드 인데, HTML의 id 값을 선택하는 선택자 입니다.

 

 

2. getElementsByName

html tag의 name=""의 name명을 선택하는 선택자입니다.

 

3. getElementsByClassName

html tag의 class="" 의 class명을 선택하는 선태자 입니다.

 

 

4. getElementsByTagName

 

 

5. querySelector

html tag의 class, id , tag 등을 선택해서 DOM선택이 가능합니다.

 

 

6. querySelectorAll

DOM 내의 모든 동일 class, tag 등을 선택해서 [object NodeList]형태로 가지고있습니다. 배열처럼 생겼지만 배열은 아닙니다.Id는 사용 하면 안됩니다. 이유는 DOM내의 유일한 값이 id이기에 중복될수없습니다.