Step 4. Interacting with Webpages(1)

• DOM, Document Object Model

DOM이라고 하면 실제로 화면에 표현된 것들, HTML은 이 DOM을 설계하기 위한 MarkUp 언어 혹은 설계도라고 보면 된다. 이 HTML 문서를 통해 화면에 보여지는 것이 DOM이다. 그리고 이 DOM은 트리구조로 이루어져 있다.

 

뒤집어 보면 나무처럼 생겼다. ^.^

위 그림을 코딩했을 때

 

• 요소 선택

사용자가 버튼을 클릭하면 글자가 바뀌는 등, 상호작용이 필요한데 이러한 동적임을 제공해주는 것이 자바스크립트를 통해 가능하다. 일단 무언가를 바꾸려면 선택되는 것이 먼저이기 때문에, 요소를 선택하는 방법을 아는 것이 중요하다. 프렙 가이드에서는 다음 사이트를 통해 예시를 보여주고 있다.

 

https://news.ycombinator.com 

document.querySelector / document.querySelectorAll

간단하게, document.querySelector('CSS선택자')를 이용하면 요소를 선택할 수 있다. 위의 경우는 .이 붙었으니 class가 rank인 요소들을 선택한 것이다. 이 사이트에서 class가 rank인 요소는 총 30개가 중복되어 있는데, document.querySelector는 이럴 때 맨 처음 것을 보여준다.

 

document.querySelectorAll은 말 그대로 선택한 모든 요소를 보여준다. 동시에 배열에 담아서 보여준다.

 

위처럼 for문을 이용해서 rank의 text를 모두 999로 바꾸어보았다. 그러면 해당 사이트에 뜨는 rank들은 다음과 같이 바뀐다.

원래는 1, 2, 3 ... 순서대로 매겨져 있었다.

 

querySelector는 id이든 class이든 모두 가져올 수 있다. 그저 .을 붙이느냐, #을 붙이느냐의 차이이다. querySelector가 선택자의 종류와 상관없이 가져오는 반면, 종류에 따라 맞게 써야하는 선택 방법도 있다.

 

이들은 .이나 #이 붙지 않는다. 그럴 필요가 없으니까. getElementsByClassName의 class가 rank인 것들 모두, getElementsByTagName은 tag가 span인 것들 모두 가져와 배열 형태로 돌려준다. id의 경우는 용도에 걸맞게 1개만 출력시킨다.

 

개발자들은 주로 querySelector와 querySelectorAll을 사용하는 편이다.

 

내가 선택한 요소의 '부모 요소' 혹은 '형제 요소'(다음에 위치한)를 선택하는 방법도 있다.

자식의 입장에서 부모를 선택하는 것이 아니라, 부모 입장에서 자식 요소들을 선택하는 방법 또한 있다. children을 사용하는 것이다.