前端学习day15-DOM：appendChild问题，利用定时器制作跑马灯，开关的点击逻辑，封装函数得到当前时间，利用Math的max，min方法取数组的最值，querySel和getel区别

本文链接：https://blog.csdn.net/qq_45926448/article/details/125576680

1.解决利用appendChild方法追加同一个元素只能追加一次的问题

1.1将节点封装到函数里面，节点为局部变量，函数执行完会被释放

  var box = document.querySelector(".box");
        function insertEl(el,content){
            var element = document.createElement(el);
            element.innerText = content;
            box.appendChild(element);
        }

        insertEl("h2","我是内容");
        insertEl("h2","我是内容");
        insertEl("h2","我是内容");

1.2克隆节点

clone 克隆 node 节点

参数为true时才会拷贝一份新对象元素

h3.cloneNode(true)

 var h3 = document.createElement("h3");
        h3.innerText = "我是h3 ===== ";
        box.appendChild(h3);
        box.appendChild(h3.cloneNode(true));
        box.appendChild(h3.cloneNode(true));

2.利用定时器制作跑马灯

颜色的表示法用rgb 用 [0~255) 随机数设置其值实现颜色效果

setinterval：interval 间隔每隔时间单位执行一次回调函数会一直执行

p1：回调函数

p2：时间间隔单位ms

 var spans = document.querySelectorAll('span');

        function randomColor() {
            return Math.floor(Math.random() * 256);
        }
        setInterval(function () {
            for (const span of spans) {
                span.style.color = `rgb(${randomColor()},${randomColor()},${randomColor()})`;
            }
        }, 100);

3.开关的点击事件

逻辑判断关键语句： this.innerText = this.innerText == "开" ? "关" : "开";

 var main =  document.querySelector("main");

        main.onclick = function () {
            this.classList.toggle("change");
            this.innerText = this.innerText == "开" ? "关" : "开";
        }

4.JS实现下拉框

获取下拉框选中的值 select.value 获得

 var select = document.createElement("select");

        var opt1 = document.createElement("option");
        opt1.innerText = "河南";
        opt1.value = "henan";
        select.appendChild(opt1);

        var opt2 = document.createElement("option");
        opt2.innerText = "河北";
        opt2.value = "hebei";
        select.appendChild(opt2);
        document.body.appendChild(select);


        // 获取下拉框选中的值  select.value 获得
        console.log(select.value);

5.封装函数得到当前时间

利用date的API方法获取时间再利用模板字符串和占位符进行拼接

对小于10的数进行补零操作

  function addZero(num) {

            return num > 10 ? num : "0" + num;
        }
        function formatDate() {
            var date = new Date();
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var mi = date.getMinutes();
            var s = date.getSeconds();
            return `${y}-${addZero(m)}-${addZero(d)}  ${addZero(h)} : ${addZero(mi)} : ${addZero(s)}`
        }
        document.write(formatDate());

6.利用Math的max，min方法取数组的最值-结合展开运算符

        var max = Math.max(...array);
        var min = Math.min(...array);

7.querySelectorAll和getElementsByTagName的区别

querySelectorAll 得到的是静态数组

getElementsByTagName 得到的是动态数组