2023.12.14笔记

        //设置style样式属性

        img.setAttribute("","")//前一对双引号内放修改的属性值，后一对内放修改后的内容

        //更改方式

        //1.元素对象.style.属性名 = "属性值"

        //例如 box.style.width = "500px"

        //2.className   用于修改类名   注:会覆盖原来的类名

        //例如 box.className = "new"

        //3.classList   用于修改类名  

        box.classList.add("new")     //该方式给予的类名会添加至原类名后

        box.classList.remove("new")  //移除类名

        box.classList.toggle("")     //若有引号内类名,则移除该类名;若没有,则添加

        //offset属性

        box.offsetheight

        box.offsetwidth

        //节点的相关操作

        //1.创建一个标签

        let a = document.createElement("li")

        //2.添加内容

        a.innerHTML=`<a href="#">新添加</a>`

        //元素的追加 父元素

        let ul = document.querySelector("ul")

        ul.appendChild(a)

        //查找节点

        //通过父代获取子节点

        let f = document.querySelector(".father")

        console.log(f.children[2])

        console.log(f.childNodes)

        //通过子代获取父节点

        let s = document.querySelector(".son")

        console.log(s.parentNode)

        //获取兄弟节点

        let son2 =document.querySelector(".son2")

  

        //inserBefore

        //1.创建li

        let newli =document.createElement("li")

        //2.添加内容

        newli.innerHTML =`新`

        //3.追加

        ul.appendChild(newli)  //添加默认添加到最后一个

        //ul.insertBefore(目标节点，参照节点)

        //例如 ul.inserBefore(newli,ul.children[0])

        //删除节点

        ul.removeChild(ul.children[1])

        //事件监听

        //事件源，事件类型，事件对象

        //事件源.addEventListener("事件类型",处理函数,true|false)

        btn.addEventListener("click",() =>{

          alert("666")

        })

        //事件类型：mouseenter，mouseleave，keyup等

        //另一种方式:  事件源.on事件类型=处理函数

        btn.onclick = function(){

            alert("666")

        }