JavaScript中的DOM操作与Web APIs-CSDN博客

本文链接：https://blog.csdn.net/qq_47296476/article/details/134308451

本文介绍了JavaScript中的DOM操作，包括ECMAScript与JavaScript的关系、DOM对象的本质、DOM树与节点、以及如何获取和操作DOM对象。此外，还讲解了如何修改元素内容、属性，以及使用间歇函数和事件监听等Web APIs的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ECMAScript 与 JavaScript 的关系：

我们在 JavaScript 阶段学习的知识绝大部分属于 ECMAScript 的知识体系，ECMAScript 简称 ES 它提供了一套语言标准规范，如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现，并且在此基础上又扩展一些实用的功能，这些被扩展出来的内容我们称为 Web APIs。

2. DOM：（DOM 的本质是一个对象）

DOM是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。

2.1 DOM树：

HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。

2.2 DOM 节点：

节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。

【元素节点】其实就是 HTML 标签，如上图中 head、div、body 等都属于元素节点。
【属性节点】是指 HTML 标签中的属性，如上图中 a 标签的 href 属性、div 标签的 class 属性。
【文本节点】是指 HTML 标签的文字内容，如 title 标签中的文字。
【根节点】特指 html 标签。

2.3 document：

document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。

<script>
  // document 是内置的对象
  // console.log(typeof document);

  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签

  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签

  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

2.4 获取DOM对象:

querySelector 满足条件的第一个元素
querySelectorAll 满足条件的元素集合返回伪数组
了解其他方式
- getElementById
- getElementsByTagName

举例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取DOM对象</title>
</head>
<!--<style>-->
<!--    .box{-->
<!--        width: 200px;-->
<!--        height: 200px;-->
<!--    }-->
<!--</style>-->
<body>
<!--<div>123</div>-->
<!--<div class="box">6666</div>-->
<ul class="nav">
  <li>测试1</li>
  <li>测试2</li>
  <li>测试3</li>
  <li>测试4</li>
</ul>
<script>
    // 1.获取匹配的第一个元素
    // const div = document.querySelector('div')
    //打印对象
    // console.log(div)//div在js中叫对象，在html中叫标签
    // const box = document.querySelector('div')
    // const box = document.querySelector('.box')
    // console.log(box)
    // 获取第一个小li
    // const li = document.querySelector('ul li:first-child')
    // console.log(li)
    // const lis = document.querySelectorAll('ul li')
    // console.log(lis)

    // 获取元素
    const lis = document.querySelectorAll('.nav li')
    for (let i =0; i< lis.length;i++) {
        console.log(lis[i])
    }

</script>
</body>
</html>

3.操作元素内容：

通过修改 DOM 的文本内容，动态改变网页的内容。（如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。

案例年会抽奖：

<!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>
    // 1.声明数组
    const personArr = ['周杰伦', '刘德华', '周星驰', 'Pink老师', '张学友']
    // 2. 先做一等奖
    // 2.1 随机数 数组的下标
    const random = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const one = document.querySelector('#one')
    // 2.3 把名字给 one
    one.innerHTML = personArr[random]
    // 2.4 删除数组这个名字
    personArr.splice(random, 1)
    // console.log(personArr)


    // 3. 二等奖
    // 2.1 随机数 数组的下标
    const random2 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const two = document.querySelector('#two')
    // 2.3 把名字给 one
    two.innerHTML = personArr[random2]
    // 2.4 删除数组这个名字
    personArr.splice(random2, 1)

    // 4. 三等奖
    // 2.1 随机数 数组的下标
    const random3 = Math.floor(Math.random() * personArr.length)
    // console.log(personArr[random])
    // 2.2 获取one 元素 
    const three = document.querySelector('#three')
    // 2.3 把名字给 one
    three.innerHTML = personArr[random3]
    // 2.4 删除数组这个名字
    personArr.splice(random3, 1)
  </script>
</body>

</html>

）

`1.innerText`

将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。

`2.innerHTML`

将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

4.DOM修改元素常见属性：

4.1能直接通过属性名修改:

最简洁的语法：
// 1. 获取 img 对应的 DOM 元素
const pic = document.querySelector('.pic')
// 2. 修改属性
pic.src = './images/lion.webp'
pic.width = 400;
pic.alt = '图片不见了...'

案例随机显示图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随机显示图片</title>
</head>
<img src="./images/1.webp">
<body>
<script>
    function getRandom(N, M) {
        return Math.floor(Math.random() * (M - N + 1)) + N
    }

    //1.获取图片对象
    const img = document.querySelector('img')
    //2.随机得到序号
    const random = getRandom(1, 6)
    //3.更换路径
    img.src =`./images/${random}.webp`

</script>

</body>
</html>

4. 2控制样式属性：

应用【修改样式】，通过修改行内样式 style 属性，实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.style.color = 'red'
    box.style.width = '300px'
    // css 属性的 - 连接符与 JavaScript 的 减运算符
    // 冲突，所以要改成驼峰法
    box.style.backgroundColor = 'pink'
  </script>
</body>
</html>

任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，（使用小驼峰命名法）要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor

`4.3`操作类名(className) 操作CSS：

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 - 修改样式</title>
    <style>
        .pink {
            background: pink;
            color: hotpink;
        }
    </style>
</head>
<body>
  <div class="box">随便一些文本内容</div>
  <script>
    // 获取 DOM 节点
    const box = document.querySelector('.intro')
    box.className = 'pink'
  </script>
</body>
</html>

注：

1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

4.4通过 classList 操作类控制CSS：

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

<!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 {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .active {
            width: 300px;
            height: 300px;
            background-color: hotpink;
            margin-left: 100px;
        }
    </style>
</head>

<body>

    <div class="one"></div>
    <script>
        // 1.获取元素
        // let box = document.querySelector('css选择器')
        let box = document.querySelector('div')
        // add是个方法 添加  追加
        // box.classList.add('active')
        // remove() 移除 类
        // box.classList.remove('one')
        // 切换类
        box.classList.toggle('one')
    </script>
</body>

</html>

注：修改样式

追加类 add() 类名不加点，并且是字符串：box.classList.add('active')
删除类 remove() 类名不加点，并且是字符串：box.classList.remove('box')
切换类 toggle() 有还是没有啊，有就删掉，没有就加上

4.5 修改表单属性：

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

正常的有属性有取值的跟其他的标签属性没有任何区别

获取:DOM对象.属性名

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

1. 获取元素：

const uname = document.querySelector('input')

2. 获取值获取表单里面的值用的表单.value

console.log(uname.value) // 电脑
console.log(uname.innerHTML) innertHTML 得不到表单的内容
3. 设置表单的值

uname.value = '我要买电脑'
console.log(uname.type)
uname.type = 'password'

4.6自定义属性

标准属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

5.间歇函数

setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

1.setInterval(函数, 间隔时间)
// setInterval(function () {
// console.log('一秒执行一次')
// }, 1000)

2.setInterval(函数名, 间隔时间) 函数名不要加小括号
function fn() {
console.log('一秒执行一次')
}

let n = setInterval(fn, 1000)
// setInterval('fn()', 1000)
console.log(n)
// 关闭定时器
clearInterval(n)