ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [web/JavaScript] 제어대상을 찾는 방법
      공부/Web 2019. 5. 22. 23:31

       

      document.getElementsByTagName('찾을 태그 이름');

      객체를 찾을때 찾을 태그이름으로 찾는다.

       

      document.getElementsByClassName('찾을 클래스 이름');

      객체를 찾을때 클래스이름으로 찾는다

       

      document.getElementById('찾을 ID이름');

      객체를 찾을때 ID값으로 찾는다

       

      document.querySelector('선택자');

      getElementsByClassName과 같지만 

      CSS의 선택자 문법을 이용해서 찾는다.

      클래스를 찾을때는 앞에 .을 붙이고

      id를 찾을때는 앞에 #을 붙인다.

       

      document.querySelectorAll('선택자');

      all이 들어감으로써 선택자에 해당하는 모든 객체를 찾는다

       

       

       

       

      만들어본 코드

       

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>뭘까요용</title>
          <script>
              // getElementsByTagName와 getElementsByClassName로 객체를 찾는 함수
              function fun_changecolor(){
                  //li 태그인 객체들을 모두 찾아서 배열비슷한걸로 저장한다
                  var lis = document.getElementsByTagName('li');
                  //class의 이름이 active인 객체들만 찾아서 저장한다
                  var classlis = document.getElementsByClassName('active');
                  for(var i = 0; i < lis.length; i++){
                      //찾은 객체들을 파랑색으로 변경
                      lis[i].style.color = 'blue';
                  }
                  for(var i = 0; i < classlis.length; i++){
                      // 클래스 이름으로 찾은 객체들을 빨강으로 변경
                      classlis[i].style.color = 'red'
                  }
              }
              // querySelector를 이용해서 객체를 찾는 함수
              function fun_selector(){
                  //단일 객체만 저장한다. class의 이름이 active인것들을 찾는다
                  var li = document.querySelector('.active');
                  li.style.color = 'blue';
                  //단일 객체만 저장. id가 ththth인것을 찾아 저장한다
                  var li = document.querySelector('#ththth');
                  li.style.color = 'pink';
                  //li태그인것들을 모두 찾아 배열로 저장
                  var lis2 = document.querySelectorAll('li');
                  for(var i in lis2){
                      if(!lis2[i].style.color){
                          lis2[i].style.color = 'red';
                      }
                  }
              }
              
          </script>
      </head>
      <body>
          <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
          </ul>
          <ol>
              <li class="active">123</li>
              <li class="active">345</li>
              <li class="active">567</li>
              <li id="ththth">this! is! ??????</li> 
          </ol>
          
          <input type="button" value="using getElementsByClassNamem getElementsByTagName" onclick="fun_changecolor()">
          <input type="button" value="using querySelector" onclick="fun_selector()">
      </body>
      </html>
      http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
      		 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none; color:white">cs

       

       

       

       

      실행 결과

       

       

      코드의 fun_changecolor() 함수를 실행한 결과

       

       

      코드의 fun_selector() 함수를 실행한 결과

       

       

       

      '공부 > Web' 카테고리의 다른 글

      [HTML] 시멘틱 웹, 시멘틱 태그  (0) 2019.05.29

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바