学習の配列と繰り返し
夜間モードでは、リンクが明るいリンクとして表示されます.
一週間の間、暗闇に投げ込みましょう.
Webページのすべてのaラベルをチェックして取得しようとすると
querySelectorという名前の関数
aタグに対応するタグのうち1番目のみをインポート
私たちがしなければならないことと合わないので、検索してみましょう.


検索結果にquerySelector Allが表示されたら、
もう一度検索して、どんな文法で書くか、どのように使うかについての説明を見つければいいです.

querySelector Allを入力し、Enterを打つとかっこ[a,a,a]が表示されます.
カッコは正しい結果ではなく配列と考えることができ,nodelistを出力するが配列と考えることができる.
a listという変数に含まれ、consoleします.logを使用する場合、カッコ内の結果
コンソールウィンドウでの出力
0は1番目のタグ、1は2番目のタグ
そしてlengthは私たちにいくつのaラベルを見つけたかを教えてくれた.
この点から、繰り返し文を使用してasterと呼ばれる変数に含まれるラベルを1つずつ取り出してスタイル属性を指定できます.

1コード順

var alist = document.querySelectorAll('a');
먼저 alist에 a태그들의 목록을 담고 있는 배열을 담았다
while문으로 반복문을 작성해보자
var i = 0; 반복문의 시작에 i의 값을 0으로 세팅한다음
i = i + 1; 을 시키고
while(i < alist.length){   
alist의 값이 alist의 length 개수보다 작은동안 반복한다라는 코드를 넣었다
console.log(alist[i]);
이렇게 넣게되면 반복문이 실행될때마다 a태그를 하나하나 가져올수있게된다
잘 실행되는지 알기 위해서 console.log (콘솔에 출력해 주는 함수)를 사용해보자

これで写真のようにすべてのラベルをスクリーンに印刷することができます.
上矢印キーを押すと再入力は不要です

2アプリケーション

alist[i].style.color = 'powerblue';
繰り返し文を実行するたびに、要素内のaタグを指します.
Powerblungスタイルの色を1行追加します.
起動後、aタイヤのスタイル値がpowerblungになるのが見えます
コードをそのままコピーし、不要な部分を取り除いて入れます.
console.log(alist[i]);もういらない

    <input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night' ){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
          alist[i].style.color = 'powderblue';
          i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';

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

3結果

ラベルの動きがよく見えます
繰り返し文を使用すると、多くの作業を簡単に完了できます.
多くの場合、コンピュータは相互に関連するデータを配列の形で返します.
たとえば、ドキュメントです.querySelector Allはこんな感じ
これらのコマンドは配列の形式で私たちに結果を与えるからです.
これらの属性があれば、文を並べたり繰り返したりするのは本当に重要な機能です.