JavaScript-day14-------＞主要内容包括选项卡，简易轮播；DOM新增，删除，替换，找父元素，找子元素，找同级；克隆节点；查找元素，以及文档碎片；留言板。

本文链接：https://blog.csdn.net/qq_52429998/article/details/122116397

1.选项卡

css样式

    <style>
        p{
            display: none;
        }
        .active{
            color: red;
        }
        .show{
            display: block;
        }
    </style>

主体内容：

<body>

    <button class="active">1</button>
    <button>2</button>
    <button>3</button>
    <p class="show">111</p>
    <p>222</p>
    <p>333</p>


    <script>

        // 
        var oBtns = document.querySelectorAll('button') ;
        var oPs = document.querySelectorAll('p') ;

        // 按钮绑定事件
        for(var i = 0 ; i < oBtns.length ; i++) {
            // 给对象添加自定义属性
            // oBtns[i].index = i ;
            // 给标签添加自定义属性
            oBtns[i].setAttribute('index' , i)
            oBtns[i].onclick = function () {  
                
                // 清除所有
                for(var j = 0 ; j < oBtns.length ; j++) {
                    oBtns[j].classList.remove('active') ;
                    oPs[j].classList.remove('show') ;
                }
                // 给当前添加
                this.classList.add('active') ;
                // oPs[this.index].classList.add('show') ;
                oPs[this.getAttribute('index')].classList.add('show') ;
            }
        }

    </script>
    
</body>

2.简易轮播

css样式：

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .banner {
            width: 600px;
            height: 400px;
            margin: 40px auto;
            position: relative;
        }
        .banner p{
            width: 600px;
            height: 400px;
            border: 1px solid #000;
            text-align: center;
            line-height: 400px;
            display: none;
            background-color: #ff0;
        }
        .banner .show{
            display: block;
        }
        .banner div{
            position: absolute;
            bottom: 10px;
            width: 100%;
            display: flex;
            justify-content: center;
        }
        .banner div button{
            width: 20px;
            height: 20px;
            background-color: #eee;
            margin: 10px;
            border: 0;
        }
        .banner div .active{
            background-color: #f00;
        }
        .banner span{
            width: 20px;
            height: 20px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            text-align: center;
            line-height: 20px;
        }
        .next{
            right: 0;
        }
        .prev{
            left: 0;
        }
    </style>

主要内容：

<body>

    <div class="banner">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
        <div>
            <button class="active"></button>
            <button></button>
            <button></button>
        </div>
        <p class="show">111</p>
        <p>222</p>
        <p>333</p>
    </div>

    <script>

        // 
        var oBtns = document.querySelectorAll('button') ;
        var oPs = document.querySelectorAll('p') ;
        var oPrev = document.querySelector('.prev') ;
        var oNext = document.querySelector('.next') ;
        var oBanner = document.querySelector('.banner') ;


        // 自动播放
        var count = 0 ;  // 控制播放第几张图片
        var t ;   // 定时器

        autoPlay()

        function autoPlay() {  
            t = setInterval(function () {  
                count++ ;
                // 播放到最后一张的时候，回到第一张
                if(count >= oPs.length) {
                    count = 0 
                }
                // 清除所有
                for(var i = 0 ; i < oBtns.length ; i++) {
                    oBtns[i].classList.remove('active');
                    oPs[i].classList.remove('show') ;
                }
                // 给count添加
                oBtns[count].classLis