ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀，每一条都经过真实交付验证。

首页 / 资讯中心 / 正文

JavaScript-3

2026/9/11 18:16:45 拓冰建站 浏览量
JavaScript-3

Web API 基本认知

作用和分类

  • 作用：就是使用 JS 去操作 html 和 浏览器
  • 分类：DOM ( 文档对象模型 )、BOM ( 浏览器对象模型 )

DOM 是什么

  • DOM ( Document Object Model —— 文档对象模型 )
  • 它是用来呈现以及与任意 HTML 或 XML 文档交互的 API
  • 通俗的说，DOM 是浏览器提供的一套专门用来"操作网页内容"的功能

DOM 树

  • 什么是 DOM 树：将HTML文档以树状结构直观表现出来，我们称之为文档树或DOM树

  • 作用：文档树直观的体现了标签与标签之间的关系

在这里插入图片描述

DOM 对象

Dom 的思想核心：把网页内容当作对象来处理

  • 浏览器根据 html 标签生成的 JS 对象
  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

document 对象

  • 是 DOM 里面提供的一个对象
  • 用来访问和操作网页内容
  • 网页所有内容都在 document 里面

获取 DOM 对象

  • 方式一：根据 CSS 选择器来获取 DOM 元素（重点）
  • 方式二：其他获取 DOM 元素方法（了解）

方式一

具体内容

  • 成功匹配的所有元素中，取第一个元素
语法：document.querySelector('CSS选择器')返回值：CSS选择器匹配成功的所有元素中的第一个元素，是一个HTMLElement对象
  • 成功匹配的所有元素中，取所有元素
语法：document.querySelectorAll('CSS选择器')返回值：CSS选择器匹配成功的所有元素，是一个装有HTMLElement对象的数组

演示部分

<body><div>111</div><div>222</div><div class="box">aaa</div><div class="box">bbb</div><div class="box">ccc</div><div id="d1">ddd</div><ul><li>li-1</li><li>li-2</li><li>li-3</li></ul><script>const a = document.querySelector('.box')console.log(a);const d = document.querySelector('#d1')console.log(d);const li = document.querySelector('li')console.log(li);const lis = document.querySelectorAll('ul li')console.log(lis);</script>
</body>

方式二

    <script>// 根据id获取一个元素document.getElementById('nav')// 根据'标签名'获取一类元素document.getElementsByTagName('div')// 根据'类名'获取对应元素document.getElementsByClassName('box')</script>

操作元素内容

innerText

<body><div>欢迎光临</div><div class="box">我是Peter</div><div class="top">搜索框</div><script>// 1. 获取元素对象const box = document.querySelector('.box')// 2. 修改文字内容console.log(box.innerText);     // 输出内容:我是Peterbox.innerText = '我是Jack'      // 注意：innerText 只显示纯文本，不解析标签// 例如：box.innerText = '<strong>我是Jack</strong>' 是解析不了标签的</script>
</body>

innerHTML

<body><div>欢迎光临</div><div class="box">我是Peter</div><div class="top">搜索框</div><script>// 1. 获取元素对象const box = document.querySelector('.box')// 2. 修改文字内容box.innerHTML = '<strong>我是Jack</strong>'</script>
</body>

操作元素属性

操作元素的常用属性

<body><img src="./images/img2.png" alt=""><script>// 1. 获取图片对象const img = document.querySelector('img')// 2. 修改图片对象的属性值img.src = './images/img3.png'</script>
</body>

操作元素的样式属性

方式一

  • 通过 style 属性操作 CSS
<body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 2. 修改对象的样式的属性值box.style.width = '300px'box.style.backgroundColor = 'green'</script>
</body>

方式二

  • 操作类名 ( className ) 操作 CSS
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;}.active {margin: 0 auto;width: 300px;height: 300px;background-color: bisque;}.radius {border-radius: 50%;}</style>
</head><body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 2. 通过改'类名'的方式，去修改对象的样式box.className = 'active radius'</script>
</body>

方式三（重点）

  • 通过 classList 操作类控制 CSS

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

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;}.active {margin: 0 auto;width: 300px;height: 300px;background-color: bisque;}.radius {border-radius: 50%;}</style>
</head><body><div class="box"></div><script>// 1. 获取对象const box = document.querySelector('.box')// 追加一个类box.classList.add('active')// 删除一个类box.classList.remove('active')// 切换一个类// 判断这个类有没有，有就删掉，没有就加上，即：类似'取反'的效果box.classList.toggle('radius')</script>
</body>

操作表单元素属性

标准属性

  • 标签天生自带的属性，比如 class、id、title 等，可以直接使用点语法操作，比如：disabled、checked、selected
<body><input type="text" value="电脑"><script>const ipt = document.querySelector('input')ipt.value = '书包'</script>
</body>

<body><input type="checkbox" name="" id="" checked><script>const ipt = document.querySelector('input')ipt.checked = false</script>
</body>

<body><button disabled>点击</button><script>const btn = document.querySelector('button')btn.disabled = false</script>
</body>

自定义属性（重点）

  • 在 html 5 中推出来了专门的 data-自定义属性
  • 在标签上一律以 data- 开头
  • 在 DOM 对象上一律以 dataset 对象方式获取
<body><div data-id="haha" data-spm="run">第1个</div><div>第2个</div><div>第3个</div><script>const one = document.querySelector('div')console.log(one.dataset.id);    // hahaconsole.log(one.dataset.spm);   // run</script>
</body>

定时器

间歇函数

使用场景

    网页中经常会需要有一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发例如：网页中的倒计时定时器函数可以开启和关闭定时器

开启定时器

	语法：setInterval(函数, 间隔时间)作用：每隔一段时间调用这个函数（间隔时间单位：毫秒）

    <script>// 开启定时器的方式一：setInterval(function () {document.write('匹配成功 <br>')}, 1000)// 开启定时器的方式二：function add() {document.write('任务完成 <br>')}setInterval(add, 2000)	// 开启</script>

关闭定时器

	语法：let 变量名 = setInterval(函数, 间隔时间)clearInterval(变量名)作用：当满足某些条件时，关闭定时器

    <script>let n = setInterval(function () {document.write('匹配成功 <br>')}, 1000)console.log(n)  // 变量里面存的是独一无二的定时器序号，这个序号是为了避免多个定时器互相干涉// 关闭定时器clearInterval(n)</script>

具体案例

<body><textarea name="" id="" cols="30" rows="10">《用户注册协议》您确认所有服务条款并完成注册程序时本协议在您与本网站间成立并发生法律效力同时您成为本网站正式用户</textarea><br><button class="btn" disabled>我已经阅读用户协议 (5s)</button><script>const btn = document.querySelector('.btn')let second = 5   // 倒计时秒数let n = setInterval(function () {second--btn.innerHTML = `我已经阅读用户协议 (${second}s)`if (second === 0) {clearInterval(n)btn.innerHTML = `我同意该协议`btn.disabled = false}}, 1000)</script>
</body>