DOM簇拥

DOM

获取节点

    <h1 id="title">hello world</h1>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>
    <script>
        let h1 = document.querySelector("#title");
        h1.innerHTML="bibascbaj";
		element.className		// 切换样式  时用
		element.src				//  切换图片 时用
		element.style.backgroundColor
		
        let btns = document.querySelectorAll(".btn");
        for(let i in btns){
            btns[i].innerHTML="test";
        }
    </script>

设置事件

    <button>按钮</button>
    <div class="box"></div>
    <script>
        let btn = document.querySelector("button");
        let box = document.querySelector(".box");
        function random (num){
            return Math.floor(Math.random()*(num + 1));
        }
        
        // 点击事件
        btn.onclick = function(){
            const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
            document.body.style.backgroundColor = rndCol;
        }
        // setInterval(btn.onclick,300);

        // 鼠标 悬停事件
        box.onmouseenter = function(){
            this.style.backgroundColor = "blue";            // this 指的是 box
        }
        // 鼠标 离开事件
        box.onmouseleave = function(){
            this.style.backgroundColor = "green";
        }
    </script>

    <style>
        img {
            width: 300px;
        }
    </style>
 -----------------------点击按钮 切换图片------------------------- 
    <div>
        <img src="../html/1.jpg" alt="">
    </div>
    <button>1</button>
    <button>2</button>
    <script>
        let img = document.querySelector("img");
        let imagesList = ["../html/1.jpg","../html/2.jpg"];
        let btns = document.querySelectorAll("button");
        for(let i in btns){
            btns[i].onclick = function(){
                img.src = imagesList[i];
            }
        }
    </script>

轮播图切换图片

    <input type="text">
    <button>按钮</button>
    <ul class="fruit-list">
        <li>apple</li>
        <li>pear</li>
        <li>orange</li>
    </ul>
 ---------------------------------------------
    <script>
        let btn = document.querySelector('button');
        let ul = document.querySelector('ul');
        let inp = document.querySelector('input');
        let list = document.querySelectorAll('.fruit-list li');
    // 实现 点击按钮 增加一个 li标签
        btn.onclick = function(){
            let value = inp.value;      // 获取输入框的文本内容
            let li = document.createElement('li');      // 创建一个 li 节点
            let txt = document.createTextNode(value);   // 创建 文本节点
            ul.appendChild(li);         // 添加节点
            li.appendChild(txt);
        }
    // 点击某li，进行删除该li
        for(let i in list){
            list[i].onclick = function(){
                ul.removeChild(this);       // 删除节点
            }
        }
    </script>