14-DOM基础

L_yang\

已于 2022-08-14 21:21:40 修改

阅读量131

点赞数

分类专栏： JavaScript 文章标签： java 数据库前端

于 2022-08-13 16:36:17 首次发布

本文链接：https://blog.csdn.net/qq_68478665/article/details/126311534

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

DOM是一套标准编程接口，通过这套接口来操作html元素

网页效果：操作元素节点、属性节点、文本节点，以及修改元素的样式

获取节点

DOM通过document对象，为开发者提供了大量接口(api)来操作DOM树。

document.getEementByld(); 通过id来获取元素

<h1 id = "title">111111</h1>
let h1 = document.getElementById("title");
// 返回值是一个dom节点

document.getEementByClassName();通过class名字来获取元素（多个）

<button class="btn">1</button>
<button class="btn">2</button>
let btns = document.getElementsByClassName("btn");
// 返回值是一个dom节点的集合

document.querySelector();获取一个节点

let h1 = document.querySelector("#title")
// 通过选择器来选择节点 由于是通过id属性来选择所以写作#id

document.querySelectorAll();获取多个节点（集合）

let btns = document.querySelectorAll("btn");
//如果需要修改集合的属性 还是需要遍历循环

domObject.innerHTML:获取元素内的所有内容

可以通过dom的innerHTML属性设置节点内的值

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

如果是class的属性节点，由于是集合的原因需要使用for...in循环遍历来修改数值

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

事件类型当……时候，做……事儿

click：点击事件如果需要绑定事件则在前面加个on 例btn.onclick =

事件监听函数：当这个事件被触发时候，这个函数则被执行

<button>打招呼</button>
let btn = document.querySelector("button");
btn.onclick = function(){
    console.log("你好啊")}

// 事件监听函数 当鼠标点击按钮控制台输出你好的内容  绑定事件需要在click前面添加on

mouseenter：鼠标移入元素如果需要绑定事件则在前面加on
mousemove ：鼠标在元素内移动
mouseleave：鼠标移出元素如果需要绑定事件则在前面加on

    let box = document.querySelector(".box");
    box.onmouseenter = function(){
        console.log("hello")
    };
    box.onmouseleave = function(){
        console.log("你好")
    }
// 移入输出hello 移出输出你好

设置样式

element.style.color 修改样式颜色

element.style.backgroundColor 修改样式背景色

    let btn = document.querySelector("button");
    let box = document.querySelector(".box");
    box.onmouseenter = function(){
       this.style.backgroundColor = "blue";
    };
    box.onmouseleave = function(){
        this.style.backgroundColor = "red";
    }
    btn.onclick = function(){
        box.style.backgroundColor = "green"
    }
//移入蓝色 移出红色 点击按钮绿色  在事件监听里修改样式需要把样式直接写在监听函数里

设置属性

element.src 切换图片效果

需要先获取图片和按钮的节点，然后定义图片路径的数组，使用for in循环按钮，设置监听属性，在监听函数里使用图片的.src循环数组。

    <div>
        <img src="images/1.jpg" alt="">
    </div>
    let img = document.querySelector("img");
    let imgList = ["images/1.jpg","images/2.jpg","images/3.jpg"]
    let btns = document.querySelectorAll("button")
    for (let i in btns){
        btns[i].onclick = function(){
            img.src = imgList[i];
        }
    }

element.id 修改id

通过class属性设置样式

element.className

可以通过定位的到节点.className = "xxxx"修改class的名称

点击原始、设置激活的背景色 注意 click跟mouseenter、mouseleave 不能同时使用

    <h1 class="title">hello world</h1>
    let h1 = document.querySelector("h1");
    h1.onclick = function(){
        h1.className = "rarara"
    } 
// 选中和取消选中
    let h1List = document.querySelectorAll("h1");
    for (let i in h1List){
        h1List[i].onclick = function(){
            if(this.className === "rerere"){
                this.className = ""
            }else{
                this.className = "rerere"
            }
        }
    }
// 有class则设为空  无则添加class值

实现轮播效果（css3）

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM基础作业</title>
    <style>
.swiper{
    height: 320px;
    width: 640px;
    overflow: hidden;
    position: relative;
}
.images-container{
    height: 320px;
    width: 1920px;
    display: flex;
    transition: transform 0.8s;
}
.images-container img{
    height: 320px;
    width: 640px;
}
/* .images-container:hover{
    transform:translate(-640px) ;
} */
.number-list{
    position: absolute;
    bottom: 0;
}
    </style>
 </head>
 <body>
    <div class="swiper">
        <div class="images-container">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
        </div>
        <div class="number-list">
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>
    </div>
    <script>
    let btnList = document.querySelectorAll(".number-list button")
    let container = document.querySelector(".images-container")
    for(let i in btnList){
        btnList[i].onclick = function(){
            // 0*640 = 0;
            // 1*640 = 640;
            // 2*640 = 1280;
            container.style.transform = `translate(${-640 * i}px)`;
        }
    }
    </script>
 </body>
 </html>