DOM-querySelector

오늘은 querySelector에 대해서 알아볼텐데요~

querySelector는 객체를 조회하는 메소드라고 볼 수 있습니다.

그럼 바로 코딩을 통해 알아보도록 하겠습니다.

    <script type="text/javascript">

      var li = document.querySelector('li');                // 속성이 'li'인 속성을 1개 선택합니다. (가장 첫번째)

      li.style.color='red';                                        // 속성이 'li'인 속성의 색깔을 빨간색으로 바꿉니다.

      var li = document.querySelector('.active');        // '.active'는 클래스의 속성을 의미합니다.

      li.style.color='blue';                                      // 클래스의 값이 'active'인 값을 파란색으로 바꿉니다. 

    </script>

결과화면은 다음과 같게 나오게 됩니다.

더 나아가서 querySelectorAll의 메소드에 대해 알아보겠습니다.

querySelectorAll은 특정속성의 값을 전부 선택하는 메소드라고 보면 되겠습니다.

for(var name in li) 는 for문의 다른 형태 인데요 

name=0 부터 li의 마지막 까지 반복문을 실행한다고 보시면 될것 같아요.

for(name=0; name< li.length ; name++) 과 같은 의미라고 보시면 될것 같아요!

그럼 오늘 포스팅은 여기까지 하도록 하겠습니다~

감사합니다!