728x90

배열과 반복문의 활용

배운 내용을 가지고 주간 모드에서와 야간 모드에서 링크 목록을 뚜렷하게 만들어보자. 

먼저 3.html 웹페이지에서 개발자도구, 검사로 들어가 console 에서 이 웹페이지에 있는 모든 a 태그를 가져와 보자. 

 

  • document.querySelector('a') 라고 입력하면 하나만 가지고 온다. 

querySelector 라고 하는 저 메소드, 함수, 명령(다 같은말)은 a태그에 해당되는 첫 번째 것만 가지고 오는 특성을 가지고 있기 때문. 

추천 검색어 javascript get element by css selector multiple
추천 검색어 javascript querySelectorAll

  • 이것을 alist 라는 변수에 담고 console.log( ); 을 입력
    console.log(); 를 입력하면 괄호 안에 있는 결과가 이 console 창에 출력된다. 

  • 괄호 안에 alist[0] 을 넣으면 첫 번째 태그가 나오고 alist[1] 을 넣으면 두 번째 태그가 선택되는 것을 볼 수 있다.
    그리고 배열답게 length를 넣으면 몇개의 a 태그를 찾았는지가 화면에 출력되는 것을 볼 수 있다.

이 점을 착안해서, 반복문을 이용해서 alist 라는 변수에 담겨있는 태그들을 하나하나 꺼내서 그것의 style 속성을 지정할 수 있을 것이다. 

 

  • 우선 alist 에 a 태그들의 목록을 담고 있는 배열을 담았다. 
    var alist = document.querySelectorAll('a');
  • 다음으로 반복문, while문 넣기
    var alist = document.querySelectorAll('a');
    var i = 1;
    while(i < alist.length){
      alist[i];
      i = i + 1;
    }
  • 그리고 추가로 잘 되는지 화면에 출력하기 위해 console.log를 넣는다.
    var alist = document.querySelectorAll('a');
    var i = 1;
    while(i < alist.length){
      console.log(alist[i]);
      i = i + 1;
    }

모든 태그를 화면에 출력할 수 있게 된다. 

  • 출력 확인 후 예제에 코드 입력하기.
    开启 —— alist[i].style.color = 'limegreen';
    关闭 —— alist[i].style.color = 'mediumspringgreen';
    (alist[1]. 반복문이 진행될 때마다 그 원소에 들어있는 a 태그를 가리킨다.) 

<!DOCTYPE html>
<html>
  <head>
    <title>WEB1 - JavaScript</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1><a href="index.html" title="到百科">WEB网络</a></h1>
    <input type="button" value="开启" onclick="
      var target = document.querySelector('body');
      if(this.value === '开启'){
        target.style.backgroundColor='black';
        target.style.color='white';
        this.value = '关闭';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
          alist[i].style.color = 'mediumspringgreen';
          i = i + 1;
        }

      } else {
        target.style.backgroundColor='white';
        target.style.color='black';
        this.value = '开启';

        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
          alist[i].style.color = 'limegreen';
          i = i + 1;
        }
      }
    ">
    <div id="grid">
      <ol>
        <h3>计算机语言-常见语言</h3>
        <li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
        <li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
        <li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
      </ol>
      <div id="文章">
        <h3>-JavaScript</h3>
          <p style="margin-top:40px;">
              <strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
          </p>
          <p>
            <a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
          </p>
          <img src="coding.jpg" width="50%">
        </div>
      </div>
      <input type="button" value="开启" onclick="
  </body>
</html>

 

저작자표시

'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글

WEB2 - JavaScript 28 (함수의 활용)  (6) 2021.09.24
WEB2 - JavaScript 24 to 27 (함수, function)  (4) 2021.09.23
WEB2 - JavaScript 19 to 22 (반복문, 배열)  (8) 2021.09.17
WEB2 - JavaScript 18 (리팩토링 중복의 제거)  (6) 2021.09.15
WEB2 - JavaScript 14 to 17 (조건문)  (2) 2021.09.15

티스토리툴바