JavaScript基础（八）——DOM基础

pro1822

已于 2022-04-12 22:59:56 修改

阅读量601

点赞数

分类专栏： JavaScript基础文章标签： javascript es6

于 2022-04-12 22:57:59 首次发布

本文链接：https://blog.csdn.net/qq_41523175/article/details/124112221

版权

JavaScript基础专栏收录该内容

14 篇文章 4 订阅

订阅专栏

一、DOM介绍

1、什么是DOM？

DOM（Document Object Model），文档对象模型。

我们可以通过DOM来操作html元素。

2、节点

1、元素节点

2、属性节点

3、文本节点

网页效果的实现通过：

1、操作节点（元素节点、属性节点、文本节点）

2、修改元素的样式（CSS）

3、document对象

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

(1)document.getElementById()和document.getElementsByClassName()：尽量不用

<body>
    <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.getElementById("title");
        let btns = document.getElementsByClassName("btn");
        console.log(h1);
        console.log(btns);
    </script>
</body>

显示如下：

输出如下：

分析：

getElementById()的返回值是一个节点，

getElementsByClassName()的返回值是节点的集合。

这两个方法比较老，尽量不用。

（2）.innerHTML

<body>
    <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.getElementById("title");
        let btns = document.getElementsByClassName("btn");

        console.log(h1.innerHTML);
        h1.innerHTML = "I love China";
        console.log(h1.innerHTML);
        for (let i in btns) {
            btns[i].innerHTML = "按钮" + i;
        }
    </script>
</body>

显示如下：

分析：

通过innerHTML可以获取到节点的文本值，并且可以修改它。

修改成功后，我们发现，页面上的文本也随之更改了。

（3）document.querySelector()和document.querySelectorAll()

我们修改这两行代码，效果跟上面一样。

        let h1 = document.querySelector("#title");
        let btns = document.querySelectorAll(".btn");

输出如下：

4、事件

（1）案例一——鼠标的点击、移入、移出事件以及节点的style

<!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>Demo11</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

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

    </div>
    <script>
        let btn = document.querySelector("button");
        btn.onclick = function () {
            console.log("hello btn");
        }

        let box = document.querySelector(".box");
        box.onmouseleave = function () {
            console.log("鼠标移出");
            this.style.backgroundColor = "red";
        }

        box.onmouseenter = function () {
            console.log("鼠标移入");
            this.style.backgroundColor = "blue";
        }
    </script>

</body>

</html>

显示如下：

分析：

onclick()方法，是鼠标点击事件。

onmouseenter()方法，是鼠标移入事件。

onmouseleaver()方法，是鼠标移出事件。

通过this.style.backgroundColor更改div的背景颜色。

（2）案例二 ——节点的id、src

<!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>Demo12</title>

    <style>
        img {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div>
        <img src="../picture/java.jpg" alt="">
    </div>
    <button id="btnId1">1</button>
    <button id="btnId2">2</button>
    <button id="btnId3">3</button>
    <script>
        let img = document.querySelector("img");
        let imageSrcList = ["../picture/java.jpg", "../picture/前端.jpg",
            "../picture/php.jpg"
        ]

        let btn = document.querySelectorAll("button");
        for (let i in btn) {
            btn[i].onclick = function () {
                console.log(this.id);
                img.src = imageSrcList[i];
            }
        }
    </script>
</body>

</html>

效果如下：

分析：

当点击不同的按钮时，通过更改img的src属性，从而实现，图片的切换。

同时，点击不同的按钮时，控制台会输出其对应的id。

（3）案例三——通过节点的className更改样式

<!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>Demo13</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <script>
        let h1List = document.querySelectorAll("h1");
        for (let i in h1List) {
            h1List[i].onclick = function () {
                if (h1List[i].className !== "active") {
                    h1List[i].className = "active";
                } else {
                    h1List[i].className = "";
                }
            }
        }
    </script>
</body>

</html>

效果如下：

分析：

通过设置节点的className属性，达到更换样式的效果。

（4）案例四——轮播图

<!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>Demo14</title>

    <style>
        .swiper {
            width: 640px;
            height: 320px;
            position: relative;
            overflow: hidden;
        }

        .container {
            width: 1920px;
            height: 320px;
            display: flex;
            transition: transform 0.3s;
        }

        .container img {
            width: 640px;
            height: 320px;
        }

        .btn {
            position: absolute;
            bottom: 0px;
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="container">
            <img src="../picture/java.jpg" alt="">
            <img src="../picture/前端.jpg" alt="">
            <img src="../picture/php.jpg" alt="">
        </div>
        <div class="btn">
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>
    </div>

    <script>
        let container = document.querySelector(".container");
        let btnList = document.querySelectorAll(".btn button");
        for (let i in btnList) {
            btnList[i].onclick = function () {
                container.style.transform = `translate(${-640 * i}px)`;
            }
        }
    </script>

</body>

</html>

效果如下：