DOM 선택하는 방법 (부제: 너로 정했다?)

DOM은 Document Object Model의 약어로, XML이나 HTML에 접근하기 위한 일종의 인터페이스이다. 자바스크립트는 프론트엔드에서 많이 사용하는 언어의 특성인지는 모르겠지만 아무튼 이 DOM들을 지지고 볶는 게 가능하다. 이벤트 추가는 기본이고 생성 삭제 CSS 클래스 부여까지 다 된다. 남자친구 못 만드는 것만 빼면 만능... 어차피 여욱이도 못 구함 질량이 0이라 

---

document.querySelector()

얘는 같이 다니는(?) 친구가 하나 있는데 바로 querySelectorAll()이다. 그럼 같은 역할인가요? 기본적으로는 그렇다. 기본적으로는 그런데 친구인 쿼리셀렉터올은 해당하는 요소를 죄다 가져온다. 예를 들어서 어떤 문서에 p태그가 6개 있다 그러면 쿼리셀렉터는 맨 위에꺼 하나만 가져오는데 쿼리셀렉터올은 p태그를 다 가져온다.

 

1) HTML 요소를 가져올 때 -> document.querySelector('p')
2) 클래스 이름으로 가져올 때 -> document.querySelector('.classname')
3) 아이디로 가져올 때 -> document.querySelector('#id')

왜 이렇게 쓰냐면 쟤는 종류불문 저거랑 맞는 걸 가져오기 때문. 클래스건 아이디건 종류 안 가리고 지명이 가능하다. 

 

See the Pen document.querySelector by koreanraichu (@koreanraichu) on CodePen.

(document.querySelector)

 

See the Pen document.querySelectorAll by koreanraichu (@koreanraichu) on CodePen.

(document.querySelectorAll)

 

아, 한가지 중요한 게 있다. querySelectorAll()로 요소를 가져올 때는 배열로 가져온다. 위 예시의 경우 div 세 개를 배열로 가져왔는데, 이 경우 내용이나 CSS를 바꾸기 위해 위의 querySelector에서 했던 것처럼 하게 되면 자바스크립트가 미쳤습니까 휴먼? 하게 된다. 그래서 querySelectorAll로 가져온 것은 for 혹은 foreach 등의 반복문을 돌려서 적용해야 한다.

document.getElement~ 

위에 있는 쿼리 시리즈는 조건이 일치하면 아이디건 클래스건 지명이 되지만, 얘네들은 종류에 따라 쓰는 게 다르다.

1) 클래스명으로 부를때는 document.getElementsByClassName('class')
2) 아이디로 부를때는 document.getElementById('id')
3) 태그 네임으로 부를때는 document.getElementsByTagName('p)

 

쿼리시리즈랑 달리 이쪽은 아이디로 가져올래, 클래스명으로 가져올래, 태그명으로 가져올래가 정해져 있어서 뒤에 가져올 게 뭔지만 쓰면 된다. 즉, 쿼리셀렉터와 달리 클래스나 아이디명으로 넣지 않는 이상 .이나 #이 들어갈 필요가 없다.

 

See the Pen document.getElement~ by koreanraichu (@koreanraichu) on CodePen.

한가지 중요한 게 있다. 아이디는 HTML 내에서 동일할 수가 없는 대신 요소나 클래스명은 동일할 수가 있다. HTML에 p태그 여러개 넣잖아요? 그래서 클래스 이름이나 태그명으로 가져오는 게 Elements인것. 그리고 얘네들은 '배열로' 가져오기 때문에 쿼리셀렉터올마냥 반복문을 써야 한다.