14분47초 구글로고 관련하여 질문드립니다.

안녕하세요 :)
강의에서는 img#hplogo 라고 적혀있어서 document.getElementById('hplogo') 와 같은 방법으로 가져올 수 있었습니다.

알려주신 정보는 img.InXdpd라고 되어있고 제 맥 pc에서 크롬으로 확인했을 땐 div#logo-default.show-logo로 보이네요.

먼저 적혀있는 문자열은 선택자라고 불리는 문자입니다. 선택자는 다음과 같이 사용됩니다.

div -> 아무 특수문자 없이 요소이름 (body, div, img, span 등)으로만 적혀있다면 현제 페이지의 모든 div 요소를 선택합니다.
#foo -> 앞에 # 를 붙이고 뒤에 문자를 붙이면 id="foo" 속성을 가진 요소를 선택합니다. (예, <div id="foo"></div>)
.bar -> 앞에 . 을 붙이고 뒤에 문자를 붙이면 class="bar" 속성을 가진 모든 요소를 선택합니다. (예, <div class="bar abc"></div>)

위 선택자들은 조합하여 사용할 수 있습니다.

예를 들어 img#foo는 img 요소 중 id="foo" 라는 속성을 가진 요소를 의미합니다. (예, <img id="foo">)

또한 span.bar는 span 요소 중 class="bar" 라는 속성을 가진 요소를 의미합니다. (예, <span class="bar"></span>)

마지막으로 p.bar.abc는 p 요소 중 class="bar abc" 라는 속성을 가진 요소를 의미합니다. 여기에서 bar와 abc의 순서는 중요하지 않습니다. 즉, p.bar.abc는 <p class="bar abc"></p>, <p class="abc bar"></p>, 그리고 <p class="hi bar good abc"></p> 과 같은 요소를 모두 의미합니다.

선택자가 다르면 자바스크립트를 통해 요소를 가져오는 방법도 다릅니다. 위에있는 예시를 그대로 적용해 방법을 나누면 다음과 같습니다.

div -> 태그 이름으로 선택하고자 하면 document.getElementsByTagName 을 사용합니다.
#foo -> id 속성 값으로 선택하고자 하면 document.getElementById를 사용합니다.
.bar -> class 속성 값으로 선택하고자 하면 document.getElementsByClassName을 사용합니다.

단, id는 하나의 요소에만 적용하기 때문에 결과가 없다면 null을 반환하고 있다면 찾은 요소를 반환합니다.

그리고 class와 tag는 여러 요소가 있을 수 있기 때문에 요소를 찾았는지 여부와 상관없이 요소 배열을 반환합니다. 단, 없다면 비어있습니다.

따라서 말씀하신 img.InXdpd라고 적힌 선택자는 다음과 같이 가져오면 됩니다.

document.getElementsByClass('InXdpd')

이 함수의 의미는 "InXdpd라는 class 속성값을 가진 모든 요소를 가져와줘"라는 의미입니다. id 속성과 다르게 class는 많은 요소에 적용할 수 있기 때문에 결과값은 요소 배열입니다. 따라서 첫 번째 요소를 가져오고 싶다면

document.getElementsByClass('InXdpd')[0]

와 같이 사용하시면 됩니다. 단, 하나도 없을 수도 있으니 배열의 길이를 확인해보거나 결과 값이 undefined인지 확인해보는 것도 중요합니다.

또한 위 세가지 방법 외에 모든 선택자에 사용할 수 있는 함수가 있습니다.

자세한 내용은 문서를 참고해보시면 좋을 것 같습니다 :)

인프런 커뮤니티 질문&답변