WEB2 - JavaScript

배열과 반복문의 활용

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 정완료
    완료
  2. 두벅
    감사합니다.
  3. 한조
    감사합니다!
  4. JT_brand
    완료
  5. 한상윤
    완료
  6. 코딩가즈아
    감사합니다
  7. 최영오
    제 홈페이지를 1억명이 방문한다고 생각하면...어려워도 밤새야겠어요 진짜루
  8. eventme
    완료
  9. hyegineer
    완료!!
    queryselectorAll로 갖고오면 노드리스트 갖고오지만 배열과 비슷함 ㅎㅎㅎ
    재밌군...
    검색지향 프로그래밍이 인상깊었습니당
  10. Hyeon-Jun Ha
    완료
  11. 코돌이
    5/12 완료!
  12. 주워니
    완료!
  13. 이리스
    아래에 친절하게 설명해주신 분이 계신데요,
    조금 더 안내드리자면, F12를 누르셔서 console창에서
    document.querySelector('a') 를 입력해보시면 가장 위에있는 WEB를 표시해줄겁니다.
    결국 document.querySelector('a') 값만 본다면 가장 위에있는 WEB을 둘러싼 a태그만을 지정해주는 것이죠.
    반복문을 빼고 document.querySelector('a').style.color = 'powderblue'; 값을 넣어보면 WEB만 powderblue로 변하는 것을 볼 수 있습니다.

    그러면 이번에는 콘솔창에서 document.querySelector('body')를 입력해봅시다. 그럼 아마 모든 body태그 안의 모든 속성들이 잡혀있을겁니다. 그렇기에 document.querySelector('body').style.color = 'white'; 을 출력하면 body안의 모든 폰트색이 흰색으로 변하게 되는겁니다.

    추가로 document.querySelector('ol').style.color='powderblue' 을 하게되면 ol 태그안의 1,2,3번의 색상이 변경될겁니다. 고로 querySelector 함수가 지정해주는 위치의 차이인 것이죠.

    그렇다면 All을 붙이는 document.querySelectorAll('a').style.color = 'powderblue'; 은 왜 안되는지 콘솔창에
    document.querySelectorAll('a').style.color 을 입력해보시면 아실겁니다. 모든 태그들을 잡아주는 것이 아니라, 해당 태그들을 배열형태로 반환해주기 때문이죠. 고로 우리는 이 배열을 풀어서 적용시켜주어야하기에 반복문을 사용하는겁니다.
    대화보기
    • 윤혜인
      저도 같은 내용이 궁금하네요!
      대화보기
      • 위준우
        완료
      • 허공
        190509 감사합니다.
      • 최승윤
        완료!
      • 김한주
        완료
      • 끝가지간다
        완료~
      • Gimme_Gsuit
        querySelectorAll('a')은 html의 a태그를 js의 배열형태로 값을 가져옵니다. 그렇기 떄문에 js에서 가져온 배열형태의 a태그를 사용하려면 반복문을 주어서 []모든 배열에 속성을 적용해준다고 보면 될겁니다. ㅎㅎㅎ
        대화보기
        • Gimme_Gsuit
          js기준으로 학습하는 과정이기 떄문이지 않을까요?ㅎㅎ js로 html과 css를 활용할 수 있는? ㅎㅎ
          대화보기
          • 저도 이거 궁금했어요
            대화보기
            • 1억이란 숫자를 너무 좋아하는 스승님.....
            • 궁금한게 있는데 haed 부분에서 a 태그에 대한 css style 설정을 바꿔주지 않고 일일이 querySelectorAll()을 통해서 style을 지정해주는 이유가 무엇인가요??
            • 완료!
            • meanyMina
              저도 초보입니다만,,, document.querySelectorAll('a')는 4개의 a tag를 나열하고 있는 배열이라서 반복문을 사용해야 합니다. 전체 배열에 "powderblue"값을 지정하는 것이 아닌, 하나 하나의 a tag를 불러와서 색을 지정해야해서 그런 것 같아요. :)
              대화보기
              • 2019-02-19 완료
              • 우도순
                완료
              • 발헤
                감사합니다.완료
              • 호두
                감사합니다.
                제어문, 반복문의 개념은 알고있지만
                html에서 적용하는 방법에 대해 잘 몰랐는데

                강의를 보고 쉽게 이해할 수 있었습니다.
              • Juyeon Heo
                저도 같은 내용이 궁금했는데, 덕분에 해결됐습니다. 감사합니다 서주부님 :)
                대화보기
                • whynitz
                  감사합니다! 궁금한게 있는데

                  document.querySelector('a').style.color = 'powderblue';

                  이걸 추가하면 night 모드에서 자동으로 a tag 텍스트가 파우더블루로 바뀌지 않을까 했는데 안되네요.

                  document.querySelector('body').style.color = 'white';

                  이건 되고 a tag 는 안되는 이유가 뭔가요?
                • 지미츄
                  완료 감사합니다 ~!
                • 이수하
                  완료
                • gravity251
                  완료
                • Aimhee
                  완료
                • 한강
                  파우더 블루 색상이 이쁘네요. 감사합니다. ^^!
                • 돼지천재
                  감사합니다.
                • Pakupaku
                  겨우 다 실습을 해봤습니다;; 천천히 차근차근 생각하지 않으면 어지러워서 내가 지금 어디에 있는지 놓쳐버리네요. 그리고 세가지의 언어들이 뭉쳐서 ””요거와 ’’ 요거 구분하는거랑 자바의 대소문자 구분이 정말정말 어렵습니다; 익숙해지는건 끈기있게 하지 않으면 안되는군요;
                • 김상근
                  for loop version

                  for(i=0; i<alist.length; i++){
                  alist[i].style.color='powderblue';
                  }
                • Jung Ik
                  좋은 강의 고마워요 이고잉 님 ~
                • asdqwer123
                  감사합니다.
                • raiN.Shower
                  7:10쯤 console창에
                  var alist=document.querySelectorAll('a');
                  var i=0;
                  while(i<alist.length){
                  console.log(alist[i]);
                  alist[i].style.color='powderblue';
                  i=i+1;
                  }
                  말고
                  var alist=document.querySelectorAll('a');
                  var i=0;
                  while(i<alist.length){
                  alist[i].style.color='powderblue';
                  i=i+1;
                  }
                  넣어도 상관없지요?

                  아 조금뒤에 필요없다고 언급하고 지우셨네요 ^^;;확인했습니다~~
                • 풀등
                  평소에 문서로만 공부해서 개념이 확실하지 않았는데, egoing 선생님의 강의를 들으니 어려워서 싫어진 부분들이 쉽고, 가깝고, 힘있게 다가옵니다. 감사합니다.^^
                • 서주부
                  querySelectorAll ('a') 로 나오는 결과는 a 들의 리스트이기 때문이래요.. 그니까 옷(a)들이 들어있는 서랍(a 들의 리스트) 에 색깔을 입힌다고 옷들의 색깔이 변하는게 아닌것처럼요~~ 그래서 하나 하나 꺼내서 색을 바꿔줘야하는데 이때 하나 하나 다 쓸수 없으니까 반복문을 쓰고요
                  대화보기
                  • Tae Ha Ahn
                    ctrl + L 로 바뀐것 같아요~ 한번에 지우기~
                    대화보기
                    • NGiveup
                      너무 잘 듣고 있습니다. 감사합니다!!
                    • 01nov
                      a태그에 꼭 반복문만 사용해야 하는건가요?

                      반복문을 사용하지 않고

                      if값
                      this.value = 'day'; 밑에

                      document.querySelectorAll('a').style.color='powderblue'; 를 넣는건 왜 안되는 건가요?
                    • 짜잔! 하실때마다 뭔가 기대가 잔뜩 되네요 ㅋㅋㅋㅋ
                      일억명이 찾는 사이트를 만드는 준비중입니다:D
                      감사합니다!!
                    • gotogoogle_webengineer
                      body태그(화면 상단의 큰 WEB)와 div 태그(ol 1~3까지의 a태그)로 묶인 a태그를 동시에 가져오려면 어떻게 해야하나요?
                      document.querySelectorAll('body #grid a'); 이런식으로 해봤는데 ol에만 적용되고 body태그에는 적용이 안되네요..
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기