WEB2 - JavaScript

제어할 태그 선택하기

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 조선
    Egoing님 강의가 초심자가 프로그래밍에 접근하는데 큰 도움이 되네요. 진입장벽을 낮추어 주시는 강의입니다. 고맙습니다..
  2. Mingi Son
    180213 강의 감사합니다!
  3. JN87
    180210 감사합니다
  4. BY Chin
    감사합니다
  5. 꼬맹파파
    backgroundColor에서 C를 대문자로 하는 것을 camelCase라고 하는거 같습니다.
    - javascript conventions.
    https://www.w3schools.com......asp
  6. 멋진노무시키
    <<2018-01-22 - ??일차_?? 번째 강의>> --> 엉엉엉ㅠㅠㅠ!
    겁나 유익한 강의를 겁나 게을러서 겁나 미루면서 겁나 후회하면서 듣고 있습니다 ㅠㅠ 마음 다잡고 열심히 다시 달려보렵니다
  7. PassionOfStudy
    << 2018-01-20 - 1일차 _아홉 번째 강의 >> --> 완료!


    검색하는 방법을 차근차근 알려주셔서 감사합니다. ㅎㅎ
    정보화시대에 구글링하는 능력을 키워야 겠습니다. 다양한 자바스크립트 함수들이 있네요 ^_^
  8. yingying
    설명 감사합니다 :)
    대화보기
    • YAMAPSYCHO
      <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = "black";
      ">
      위에 코드를 보시면 onclick = 하고 쌍따옴표 시작하고있기 때문에 black에 쌍따옴표가 붙으면 onclick에 들어간 쌍따옴표가 끝나는걸로 컴퓨터는 인식하여 black을 인식하지 못하는것입니다.

      쉽게 onclick="document.querySelector('body').style.backgroundColor = "까지 onclick이벤트가 인지를 하는것이고 그뒤에 black는 input에 적용된 존재하지않는 속성어로 컴퓨터가 인식한것 입니다.
      대화보기
      • yingying
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.backgroundColor="black";

        위의 'black' 작은 따옴표는 동작하는데
        아래의 "black" 큰 따옴표는 동작하지 않네요.
        작은따옴표와 큰 따옴표를 사용하는데 정해진 게 있나요? 저는 둘 다 같은 역할을 하는줄 알고있었습니다.
      • 감사합니다~
      • <input type = "button" value = "night" onclick = "document.querySelector( ).style.color = 'blue';">
        위의 코드에서 괄호안에 태그를 넣고 싶으면 그냥 '태그이름'을 넣으면 되고,
        만약에 응용해서 클래스나 아이디를 넣고 싶으면 '.클래스이름'이나 '#아이디이름'을 넣으면 되겠네요~!
      • 이유리
        감사합니다.
      • 저도 css부터 이어서 듣고 있는 학생입니다.
        아래 학우분과 같은 문제가 발생하였습니다.
        버튼을 클릭하였을시 <a>태그 의 첫번째인 맨위의 제목 WEB만 변경이 적용되었습니다.

        그래서 해결방법을 알아보다가 querySelectorAll()[]~ querySelectorAll()[] 배열을 사용하여
        해결이 되었습니다. 이후에 반복문을 배우고나면 더 깔끔하게 처리할 수 있을것같습니다.

        하지만 이보다 더 깔끔한 해결 방법이 있을것 같은데 무엇인가요
      • 사주
        안녕하세요~
        CSS부터 이어서 듣고있는 학생입니다.

        이어서 듣다보니 원래 쓰던 CSS예제파일에 자바스크립트 day/night 버튼을 이어서 만들었는데요
        BODY태그 전체에 background및 글씨color를 설정했는데도 CSS강의에서 디자인을 설정했던 H1태그 부분과 OL태그 부분은 적용이 안되더라고요...

        혹시나해서 <link rel="stylesheet" href="style.css"> 이걸 헤드에서 지우고 실습해보니 강의에서 나오는것처럼 잘 되긴 하는데.. 혹시 이런경우에는 제가 설정한 자바스크립트가 CSS보다 우선하도록 뭔가 또 조치를 취해야 하는 것인가요?
      • 치킨
        아 재밌어 감사합니다 !!
      • SanFrancisco
        그리고 querySelector는 하나의 태그만 선택할 수 있기 때문에 CSS의 선택자와 완벽히 호환되는 것은 아닌 것 같습니다. 예를 들어서 querySelector("p")라고 쓰면 모든 p태그 중 가장 첫번째 태그 하나만 선택된다고 나오네요. 검색해보니까 정말 CSS처럼 모든 태그를 선택할 수 있게 만들려면 querySelectorAll()을 사용해야 되는 듯 합니다.
      • SanFrancisco
        document.querySelector("body").style.color="black"인데 p태그 말고는 나머지 태그 문자 색이 변하지 않네요. h1나 a 태그는 색이 변하지 않아요. body 태그는 모든 본문 태그의 부모 태그이므로, body 태그의 color를 black으로 지정하면 모든 자식 태그의 color도 black으로 변해야 하잖아요? 그런데 color라는 속성이 a, h1~h6, p 등 문자열을 표현하는 모든 태그에 적용이 되지 않고, p 태그에만 적용이 됩니다.
      • 촌띄기
        'body'자리에 굳이 'body'가 아니라 다른 셀렉터가 와도 동작하는군요!
        css에서는 어떠한 따옴표가 오든 동작되는데
        JS에서는 무조건 작은따옴표( ' )가 와야되나요
      • -정리-
        document.querySelector('body').style.color = '*' ;

        하나 하나 정리해 가면,
        document - 이 문서의
        query - 질의하다
        Selector('body') - CSS의 셀렉터로 body
        color - CSS의 속성
        '*' - 속성값으로 *를 준다
      • egoing
        네네 그것도 동작할꺼예요. 여러가지 방법이 있답니다~
        대화보기
        • document.querySelector('body').style. 을 그냥 document.body.style. 로 써도 되는것 맞지요?
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기