Web前端HTML笔记9

最新推荐文章于 2026-08-22 17:30:01 发布

原创最新推荐文章于 2026-08-22 17:30:01 发布 · 109 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

元素属性：1.普通属性 2.style属性 3.offset属性

更改元素属性：

1.普通属性元素对象.属性名=属性值

2.style属性

1）元素对象.style.属性名 = “属性值”

2）className 会覆盖原有类名

box.className = "box new"

3）classList

box.classList.add("new") // 添加类名

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

box.classList.toggle("box") //切换

// 获取style样式属性的属性值

console.log(getComputedStyle(box,false)["backgroundColor"])

3.offset属性

通过节点追加元素：

    <script>
        // 1.创建一个li标签
        let newLi = document.createElement("li")
        console.log(newLi)
        // 2.添加内容
        newLi.innerHTML=`<a herf="#">我是新加入的li</a>`
        // 3.元素的追加       父元素
        let ul = document.querySelector("ul")
        ul.appendChild(newLi)
    </script>

查找节点：

<body>
    <div class="father">
        父亲
        <div class="son">儿砸1</div>
        <div class="son">儿砸2</div>
        <div class="son2">儿砸3</div>
        <div class="son">儿砸4</div>
    </div>

    <script>
        // 1.通过父亲获取子节点
        // let f = document.querySelector(".father")
        // console.log(f.children[2])
        // console.log(f.childNodes)

        // 2.通过儿砸找到父节点
        // let s = document.querySelector(".son")
        // console.log(s.parentNode)

        // 3.兄弟节点
        let son2 = document.querySelector(".son2")
        console.log(son2.previousElementSibling)	// 获取上一个兄弟元素
        console.log(son2.nextElementSibling)	// 获取下一个兄弟元素

    </script>
</body>

insertBefore:向目标节点追加元素

    <script>
        let ul = document.querySelector("ul")
        // 创建li
        let newLi = document.createElement("li")
        // 添加内容
        newLi.innerHTML=`新来的`
        // 追加
        ul.appendChild(newLi)

        // ul.insertBefore(目标节点，参照节点)
        ul.insertBefore(newLi,ul.children[0])  
    </script>

克隆节点： newf.cloneNode(true)

删除节点： ul.removeChild(ul.children[1])

事件的组成：事件源、事件类型、事件对象

事件监听：事件源.addEventListener("事件类型"，处理函数，true|false)

排他思想：

<body>

    <button>第1个</button>
    <button>第2个</button>
    <button>第3个</button>
    <button>第4个</button>
    <button>第5个</button>


    <script>
        // 1.获取元素
        let btns = document.querySelectorAll("button")
        console.log(btns)

        // 添加事件
        for(let i = 0; i < btns.length; i++){
            btns[i].addEventListener("mouseenter",function(){
                for(let j = 0; j < btns.length;j++){
                    btns[j].classList.remove("pink")
                }
                btns[i].classList.add("pink")
            })
        }

    </script>
</body>

标签