JavaScript入门学（Web APIs）

时间：2024-03-03 15:12:56

1.变量声明

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 DOM介绍

2.1 什么是DOM

在这里插入图片描述

2.2 DOM树

在这里插入图片描述

2.3 DOM对象（重要）

在这里插入图片描述
在这里插入图片描述

3.DOM（文档对象模型）-获取元素

在这里插入图片描述

3.1 获取匹配的第一个元素

在这里插入图片描述

<!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>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="box">123</div>
<p id="nav">abc</p>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    //1.获取匹配的第一个类选择器
    const box = document.querySelector(`div`)  //标签名
    const box1 = document.querySelector(`.box`)  //类选择器
    console.log(box)
    console.log(box1)
    //2.获取匹配的第一个id选择器
    const nav=document.querySelector(`#nav`)
    console.log(nav)
    //3.获取匹配的第一个li选择器
    const li=document.querySelector(`ul li:first-child`)
    console.log(li)
</script>
</body>
</html>

3.2 获取匹配的多个元素

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.3 其他获取DOM元素的方法

在这里插入图片描述

4.操作元素内容

在这里插入图片描述

4.1 对象.innerText属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>操作元素内容（对象.innerText属性）</title>
</head>
<body>
<div class="box">文档内容</div>
<script>
    //1.获取元素
    const box=document.querySelector(`.box`)
    // console.log(box)
    //2.修改文字内容  对象.innerText 属性
    console.log(box.innerText)  //获取文字内容
    box.innerText=`div盒子`    //修改文字内容，不解析标签
</script>
</body>
</html>

4.2 对象.innerHTML属性(常用)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>操作元素内容（对象.innerHTML属性）</title>
</head>
<body>
<div class="nav">文档文字内容</div>
<script>
    const nav=document.querySelector(`.nav`)  //获取对象
    console.log(nav.innerHTML)  //获取文档内容
    nav.innerHTML=`修改文档内容`   //修改文档内容
</script>
</body>
</html>

在这里插入图片描述

5.修改元素常见的属性

5.1 修改图片元素常见属性

<!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>修改元素常见的属性</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>
    //1.获取图片元素
    const img = document.querySelector(`img`)
    //2.修改图片对象的属性 ，对象.属性=值
    img.src = "../static/images/2.webp"
    img.title="刘德华"  //鼠标悬浮
</script>
</body>
</html>

随机图片

<!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>页面刷新，图片随机更换</title>
</head>
<body>
<img src="../static/images/1.webp" alt="">
<script>
    //取得N~M的随机整数
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //1.获取对象
    const img = document.querySelector(`img`)
    //2.得到随机序号
    const seq=getRandom(1,6)
    //3.修改对象属性
    img.src = `../static/images/${seq}.webp`
    img.title="刘德华"
</script>
</body>
</html>

5.2 修改样式元素属性(style)

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>修改样式元素属性</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    //1.获取元素
    const box=document.querySelector(`.box`)
    //2.修改样式属性   对象.style.样式属性=`值`，记得单位，之所以带着style，是因为该代码中的样式在style元素中
    box.style.width=`300px`
    //多组单词的采用小驼峰命名法
    box.style.backgroundColor=`blue`   //background-color需要使用小驼峰命名法
    box.style.border=`2px solid lightpink`
    box.style.borderTop=`2px solid red`   //上边框样式
</script>
</body>
</html>

随机背景图片

<!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>页面刷新，页面随机更换背景图片</title>
    <style>
        body {
            background: url("../static/images/desktop_1.jpg") no-repeat top center/cover;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script>
    //随机生成N~M的整数
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //1.获取对象,省略
    //2.获取随机整数
    const seq = getRandom(1, 10)
    //3.修改背景颜色
    document.body.style.backgroundImage = `url("../static/images/desktop_${seq}.jpg")`
</script>
</body>
</html>

5.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>通过类名修改样式</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .nav {
            color: purple;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="nav"></div>
<script>
    //1.获取元素
    const div = document.querySelector(`div`)
    //2.添加类名   class是个关键字，所以我们要使用className
    div.className = `nav box`  //注意：不用`.box`而是`box`，有多种类名的情况
</script>
</body>
</html>

5.4 修改样式元素属性（classList）（重点）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<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>通过classList修改样式</title>
    <style>

相关文章