js学习笔记6DOM

通过DOM这套接口来操作html元素

获取节点

html：

<h1 id="title">hello world</h1>
    <button class="btn">1</button>
    <button class="btn">2</button>
    <button class="btn">3</button>

document.getElementById();

   let h1=document.getElementById("title");
         h1.innerHTML="你好世界"

document.getElementByClassName();

 let btns=document.getElementsByClassName("btn");
        for(let i in btns){
            btns[i].innerHTML="test";
        }
        console.log(btns);

**document.querySelector();

 let h1=document.querySelector("#title");
        h1.innerHTML="你好世界"

document.querySelectorAll()**;

 let btns=document.querySelectorAll(".btn");
        for(let i in btns){
            btns[i].innerHTML="test";
        }

element.innerHTML: 获取和设置元素内的所有内容

事件类型：

html

<button>按钮</button>
    <div class="box"></div>

click：点击事件 onclick

// <!-- 点击事件 -->
        let btn=document.querySelector("button");
        btn.onclick=function(){
            console.log("hello btn")
        }

mouseenter：鼠标移入元素 onmouseenter

let box=document.querySelector(".box");
        box.onmouseenter=function(){
            // console.log("hello world");
            this.style.backgroundColor="blue";
        }

mouseleave：鼠标移出元素 onmouseleave

box.onmouseleave=function(){
            // console.log("Bye Bye");
            this.style.backgroundColor="aqua";
        }

mousemove：鼠标移动 onmousemove

设置样式

element.style.color=" "
element.style.backgroundColor=" "

设置属性

element.src=
element.id

通过class属性设置样式

element.className