当前位置：首页 > news >正文

【JavaScript】十一、DOM对象的获取和修改

news 来源：原创 2025/6/23 10:48:27

文章目录

1、获取DOM对象
- 1.1 根据CSS选择器来获取DOM元素
- 1.2 其他获取DOM元素方法
2、操作修改元素的内容
3、练习：年会抽奖
4、操作修改元素的属性
- 4.1 操作元素常用属性
- 4.2 操作元素样式属性
- - 4.2.1 通过style属性操作CSS
  - 4.2.2 通过类名className操作CSS
  - 4.2.3 通过classList操作CSS
- 4.3 操作表单元素属性
- 4.4 自定义属性

1、获取DOM对象

1.1 根据CSS选择器来获取DOM元素

跟 CSS选择器类似，选中标签后才能操作，同样的，查找DOM对象，就是利用JS选中页面的标签元素：

1）选择匹配的第一个元素

语法：

在这里插入图片描述

传参：包含一个或多个有效的CSS选择器的字符串
返回：CSS选择器匹配的第一个元素，是一个 HTMLElement对象，且这个DOM对象可以直接操作修改，没匹配到，则返回null
文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
练习：

<body>
  <div class="box">123</div>
  <div class="box">asd</div>
  <p id="nav">导航栏</p>
  <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ul>

  <script>
    // 使用标签选择器获取
    const div = document.querySelector('div')
    // 使用类选择器获取
    const box = document.querySelector('.box')
    console.dir(div)
    console.dir(box)
    // 使用ID选择器获取
    const nav = document.querySelector('#nav')
    console.dir(nav)

    // 获取ul的第一个li
    const li = document.querySelector('ul li:first-child')
    console.log(li)
  </script>
</body>

在这里插入图片描述

2）选择匹配多个元素

语法：

在这里插入图片描述

传参：包含一个或多个有效的CSS选择器的 字符串
返回：匹配到的对象集合NodeList
练习：

<body>
  <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ul>

  <script>
    // 获取ul的所有li
    const lis = document.querySelectorAll('ul li')
    console.log(lis)
  </script>
</body>

在这里插入图片描述

注意，NodeList是一个伪数组，有长度有索引号，但是没有 pop() push() 等数组方法，因此，只能通过for遍历来获取和修改获取到的DOM对象

在这里插入图片描述

<body>
  <ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ul>

  <script>
    const lis = document.querySelectorAll('ul li')
    console.log(lis)
    for (let i = 0; i < lis.length; i++) {
      console.log(lis[i])
    }
  </script>

在这里插入图片描述

1.2 其他获取DOM元素方法

比较早的一种写法，后两个方法得到的也是一个伪数组

在这里插入图片描述

2、操作修改元素的内容

对象.innerText 属性：只识别文本，不能解析标签
对象.innerHTML 属性：能识别文本，能够解析标签

不能解析标签，即如果你更新的文本里带有html标签，操作innerText属性，文本里的html标签会原样输出，不做解析，因此，纠结到底用谁，都可以选择innerHTML

<body>
  <div class="box">这是文字内容</div>
  <script>
    // 获取元素
    const box = document.querySelector('.box')

    // 修改文字内容
    console.log(box.innerText)

    box.innerText = '这是修改后的内容'

    box.innerHTML = '<strong>修改后的内容带标签</strong>'
  </script>
</body>

在这里插入图片描述

3、练习：年会抽奖

需求：从数组随机抽取一等奖、二等奖和三等奖
实现思路：

先写静态html，中奖员工名字占位留着
写JS，生成随机数，从数组中找到对应的员工
通过innerHTML属性修改元素内容

<!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>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>年会抽奖</strong>
    <h1>一等奖：<span id="one">???</span></h1>
    <h3>二等奖：<span id="two">???</span></h3>
    <h5>三等奖：<span id="three">???</span></h5>
  </div>
  <script>
    const personArr = ['员工1', '员工2', '员工3', '员工4', '员工5', '员工6']

    const random1 = Math.floor(Math.random() * personArr.length)
    const one = document.querySelector('#one')
    one.innerHTML = personArr[random1]
    personArr.splice(random1, 1)  // 删除已经获奖的人，再进行下一轮抽奖

    const random2 = Math.floor(Math.random() * personArr.length)
    const two = document.querySelector('#two')
    two.innerHTML = personArr[random2]
    personArr.splice(random2, 1)

    const random3 = Math.floor(Math.random() * personArr.length)
    const three = document.querySelector('#three')
    three.innerHTML = personArr[random3]
    personArr.splice(random3, 1)
  </script>
</body>

</html>

在这里插入图片描述

4、操作修改元素的属性

4.1 操作元素常用属性

通过JS 设置或修改标签的属性，比如通过src更换图片

语法：

在这里插入图片描述

示例：

// 获取元素
const pic = document.querySelector('img')
// 修改元素属性
pic.src = './images/new.jpg'
pic.title = '新的标题'

练习：当我们刷新页面，页面中的图片随机显示不同的图片

<body>
    <img src="./images/desktop_1.jpg" alt="">
    <script>
        const img = document.querySelector('img')
        const random = Math.floor(Math.random() * 10 + 1)
        img.src = `./images/desktop_${random}.jpg`
        img.title = '风景'
    </script>
</body>

4.2 操作元素样式属性

在这里插入图片描述

通过JS 设置或修改标签的样式属性，比如实现轮播图小圆点自动更换颜色样式

4.2.1 通过style属性操作CSS

语法：

在这里插入图片描述

示例：

在这里插入图片描述

练习：刷新页面，页面中的背景图片随机显示不同的图片

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url(./images/desktop_1.jpg) no-repeat top center/cover;
        }
    </style>
</head>

<body>
    <script>
        let random = Math.floor(Math.random() * 10 + 1)
        // css页面背景图片 background-image
		//标签选择body
		//因为body是唯一的标签，可以直接写 document.body.style
        document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
    </script>

</body>

4.2.2 通过类名className操作CSS

修改多个样式时，使用style属性得一个个修改，繁琐，可使用css类名的方式：

语法：这里用className，而不是像类选择器一样用class属性名，是因为class是JS关键字，所以用className这个属性名

在这里插入图片描述

示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .old {
            color: red;
        }

        /* 新定义一个CSS选择器 */
        /* 快速生成，敲：w300+h300+bgc */
        .new {
            width: 300px;
            height: 300px;
            background-color: greenyellow;
        }
    </style>
</head>

<body>
    <div class="old">123</div>
    <script>
    	// 获取元素
        const div = document.querySelector('.old')
        // 修改样式
        div.className = 'new'
    </script>

</body>

注意：直接使用 className 赋值会覆盖以前的类名，如上面old的样式会被覆盖掉，不再保留，要想都保留，可以在修改时把类名都加上

在这里插入图片描述

4.2.3 通过classList操作CSS

为了解决className 容易覆盖以前的类名，使用classList来做追加和删除CSS选择器类名，不影响以前的类名

语法： toggle，切换，即有这个样式就删掉，没有就加上

在这里插入图片描述

示例：上面className同时保留两个样式，用classList来实现：

<body>
    <div class="old">123</div>
    <script>
        const div = document.querySelector('.old')
        div.classList.add('new')
        // 有就删掉，没有就加上
        //div.classList.toggle('new')
    </script>

</body>

练习：刷新页面，页面中的轮播图会显示不同图片以及样式

在这里插入图片描述

// 先写静态html和CSS，页面主要由三个两个div盒子，外面套一个div盒子组成
// 再JS操作DOM对象，修改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>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始数据
    const sliderData = [
      { url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]

    const random = Math.floor(Math.random() * sliderData.length)
    //  获取DOM
    const img = document.querySelector('.slider-wrapper img')
    const p = document.querySelector('.slider-footer p')
    const div = document.querySelector('.slider-footer')
    const data = sliderData[random]
    // 修改DOM
    img.src = data.url
    p.innerHTML = data.title
    div.style.backgroundColor = data.color
    // random是0-7，而无序列表下的li是1-8，所以加1
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    // 添加一个active样式，让小圆点选中
    li.classList.add('active')
  </script>
</body>

</html>

效果：

在这里插入图片描述

4.3 操作表单元素属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

在这里插入图片描述

语法：

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

示例：

<body>
  <input type="text" value="电脑">
  <script>
    // 获取元素
    const uname = document.querySelector('input')
    // 获取表单元素的值，不用innerHTML，只能用value
    console.log(uname.value)  //电脑
    // 设置表单的值
    uname.value = '笔记本'
    // 修改文本框为密码框
    uname.type = 'password'
  </script>
</body>

表单中，选中和不选中☑️，相关属性如disabled、checked、selected，设置true表示添加了该属性，设置为false表示取消选中

在这里插入图片描述

<body>
  <input type="checkbox">
  <button>按钮</button>
  <script>
    // 获取元素
    const ipt = document.querySelector('input')
    // 给复选框打对勾✅
    ipt.checked = true

    const button = document.querySelector('button')
    // 置灰按钮
    button.disabled = true  
  </script>
</body>

效果：

在这里插入图片描述

4.4 自定义属性

除了标签语法中自带的属性，还可以自定义属性：

在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取，.dataset可以获取到这个DOM的所有自定义属性的集合

在这里插入图片描述

示例：

<body>
  <!-- 自定义属性data-id -->
  <div data-id="1">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    // 获取自定义属性
    console.log(one.dataset.id)
  </script>
</body>