JS05-DOM对象

colorsZeroz

已于 2024-03-17 09:37:06 修改

阅读量825

点赞数 14

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

于 2024-03-15 17:21:26 首次发布

本文链接：https://blog.csdn.net/colorsZeroz/article/details/136745500

版权

JavaScript基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

DOM

获取DOM对象

<!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>Document</title>
</head>
<body>
    <div  id="a1">1</div>
    <div>2</div>
    <div class="box3">3</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
        let div = document.querySelector('.box3')
        // query 查询
        // Selector 选择器
        // css类 得到第一个元素
        console.log(div);
        let li =document.querySelector('ul li:last-child')
        console.log(li);
        let span = document.querySelectorAll('div span')
        // 得到伪数组
        console.log(span);

        document.getElementById('a1')
        // ID选择器

        document.getElementsByTagName('div')
        // 标签 获取页面所有div

        document.getElementsByClassName('box1')
        // 类名 获取所有类名为box1
    </script>
</body>
</html>

修改元素内容

        let box = document.querySelector('div')
        box.innerText = 'ccccc'
        // 不解析标签
        box.innerHTML = '<strong>dddd</strong>'
        // 可解析标签

案例

随机点名

<!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>Document</title>
    <style>
        div{
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            align-items: center;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    抽中的：<div>1</div>
    <script>
        let box = document.querySelector('div')
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        let arr = ['刻晴','香菱', '凝光','甘雨','钟离']
        let random = getRandomIntInclusive(0,arr.length - 1)
        box.innerHTML = arr[random]
        arr.splice(random,1)
    </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>Document</title>
    <style>
        body{
            background-image: url(../../resources/image/background/1.jpg);
            background-size:1920px 1080px ;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
        }
        let num = getRandomIntInclusive(1,9)
        document.body.style.backgroundImage = `url(../../resources/image/background/${num}.jpg)`
    </script>
</body>
</html>

colorsZeroz

关注

14
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS05-DOM对象

querySelector、getElementById、getElementsByTagName和getElementsByClassName等DOM方法来获取元素。接着，利用innerText和innerHTML更改元素内容，前者纯文本，后者可包含HTML结构。案例部分包括两个小应用：一是随机点名系统，利用数学随机数选取数组内的名字并显示在页面指定位置；二是随机背景切换，通过随机数选定背景图片编号，动态设置body元素的背景图片URL，实现页面背景的随机变化
复制链接

扫一扫