循环函数DOM简例

1 效果

2 代码

 function BodyAddP(doing = "do while", num = 0) {
        document.body.appendChild(document.createElement("p")).innerHTML = "我来报个数：" + doing + "->" + num;
      }
      SetBox1BackColor = () => (document.querySelector(".box").className = "box green");
      SetBox1BackColor();
      SetBoxBackColor = (color = "green", ...boxs) => {
        let tempColor = "";
        for (box of boxs) {
          tempColor = "box " + color;
          document.querySelector(".box:nth-of-type(" + box + ")").className = tempColor;
        }
      };
      function RowAddP(context = "row p") {
        document.getElementsByName("selector")[0].innerHTML += "<p>" + context + "</p>";
      }
      SetBoxBackColor("green", 4, 6, 9);
      SetBoxBackColor("sienna", ...[2, 3, 4]);
      Selector = () => {
        RowAddP("tagname->" + document.getElementsByTagName("h1")[0].innerHTML);
        RowAddP("name->" + document.getElementsByName("byname")[0].innerHTML);
        RowAddP("id->" + document.getElementById("love3").innerHTML);
        RowAddP("className->" + document.getElementsByClassName("boxLove")[3].innerHTML);
        RowAddP("querySelectorAll->" + document.querySelectorAll(".boxLove")[4].innerHTML);
        let selectorArr = document.querySelectorAll(".boxLove:nth-of-type(n+5)");
        console.log(selectorArr);
        for (v of selectorArr) {
          document.querySelectorAll(".boxLove")[5].innerHTML += "<p>" + v.innerHTML + "</p>";
        }
        document.querySelectorAll(".boxLove")[7].classList.toggle("boxLoveWidth");
        document.querySelectorAll(".boxLoveWidth")[0].innerHTML +=
          "<p>" +
          "data-ok->" +
          document.querySelector("#data-test").dataset.ok +
          "</p>" +
          "<p>" +
          "data-hello-ok->" +
          document.querySelector("#data-test").dataset.helloOk +
          "</p>";
        document.querySelector("#data-test").dataset.ok = 10000;
        document.querySelectorAll(".boxLoveWidth")[0].innerHTML +=
          "<p> set" +
          "data-ok->" +
          document.querySelector("#data-test").dataset.ok +
          "</p>" +
          "<p>" +
          "data-hello-ok->" +
          document.querySelector("#data-test").dataset.helloOk +
          "</p>";
      };
      Selector();
      BodyAddP(0);
      let i = 1;
      let arrGoodHe = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      do {
        if (i <= 10) {
          BodyAddP("do while", i);
          i++;
        }
        while (i > 10 && i < 21) {
          BodyAddP("while", i);
          i++;
        }
        if (i > 20 && i < 31) {
          for (j = i; j < 31; j++) {
            BodyAddP("for", i);
            i++;
          }
        }
        if (i > 30 && i < 41) {
          for (v in arrGoodHe) {
            BodyAddP("for in", parseInt(v) + i);
          }
          i += 10;
        }
        if (i > 40 && i < 51) {
          arrGoodHe.forEach(function (v, index) {
            BodyAddP("forEach", parseInt(index) + i);
          });
          i += 10;
        }
        if (i > 50 && i <= 100) {
          for (let k = 0; k < 5; k++) {
            for (v of arrGoodHe) {
              BodyAddP("for of", 10 * k + parseInt(v) + i - 1);
            }
          }
          i += 50;
        }
      } while (i <= 100);

3 总结

感谢老师教导！
主要学习for、function、DOM访问。
手还是有些生熟，没有按时做作业。