mac에서는 작동하지않습니다..(회원가입 폼 검증-1)

안녕하세요 :)

1. window.addEventListener('load', listener)는 OS나 브라우저와 상관없이 동작하는 함수입니다. 동작하지 않는다면 아마 다른 이유로 동작하지 않을 가능성이 큽니다. 다음을 참고해주세요. load 이벤트 문서

2. 구글 로고와 관련해서 알려주신 문제는 같은 질문에 대한 답변이 있어 붙여드리겠습니다 :)

강의에서는 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인지 확인해보는 것도 중요합니다.

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

• document.querySelector 
• document.querySelectorAll

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