本文详细介绍了DOM（文档对象模型）的概念及其在网页动态更新中的作用，包括如何通过DOM对象来操作HTML元素，如修改内容、样式和属性。同时，文章探讨了JavaScript变量声明的首选项，推荐使用`const`并解释了何时使用`let`。此外，还讲解了间歇函数`setInterval`的使用方法。
DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。
简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
webapis的作用和分类
DOM 树
<!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>
文本
<a href="">链接名</a>
<div id="" class="">文本</div>
</body>
</html>
如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
DOM 节点
节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
-
【元素节点】其实就是 HTML 标签，如上图中
head、div、body等都属于元素节点。 -
【属性节点】是指 HTML 标签中的属性，如上图中
a标签的href属性、div标签的class属性。 -
【文本节点】是指 HTML 标签的文字内容，如
title标签中的文字。 -
【根节点】特指
html标签。 -
其它...
document
document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。
获取DOM对象
-
querySelector 满足条件的第一个元素
-
querySelectorAll 满足条件的元素集合 返回伪数组
-
了解其他方式
-
getElementById
-
getElementsByTagName
-
<body>
<div class="box">hello</div>
<script>
const div = document.querySelector('.box')
console.log(div)
</script>
</body>
<!-- css选择器 类选择器注意加. id选择器记得加# -->
<!-- 作用:可以获取第一个指定的html标签 对于js来说就是一个dom对象 如果获取得不到就是得到null -->
<body>
<div>1</div>
<div>2</div>
<script>
const div = document.querySelectorAll('div')
console.log(div[0])
</script>
</body>
<!-- 获取成功是一个有数组元素的数组,获取失败空数组NodeList [] -->
操作元素内容
通过修改 DOM 的文本内容，动态改变网页的内容。
-
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。 -
innerHTML将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
<script>
// innerText 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
// intro.innerText = '嗨~ 我叫李雷！'
// intro.innerText = '<h4>嗨~ 我叫李雷！</h4>'
</script>
<script>
// innerHTML 将文本内容添加/更新到任意标签位置
const intro = document.querySelector('.intro')
intro.innerHTML = '嗨~ 我叫韩梅梅！'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
</script>
<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>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
}
const arr = ['哈哈哈', '刘德华', '周星驰', '周杰伦', '李连杰']
const all = document.querySelectorAll('.wrapper span')
for (let i = 0; i < all.length; i++) {
const index = getRandom(0, arr.length - 1)
all[i].innerHTML = arr[index]
arr.splice(index, 1)
}
</script>
常用属性修改
-
直接能过属性名修改，最简洁的语法
<script> // 1. 获取 img 对应的 DOM 元素 const pic = document.querySelector('.pic') // 2. 修改属性 pic.src = './images/lion.webp' pic.width = 400; pic.alt = '图片不见了...' </script>
控制样式属性
-
应用【修改样式】，通过修改行内样式
style属性，实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。
任何标签都有 style 属性，通过 style 属性可以动态更改网页标签的样式，如要遇到 css 属性中包含字符 - 时，要将 - 去掉并将其后面的字母改成大写，如 background-color 要写成 box.style.backgroundColor
<script>
// 获取 DOM 节点
const box = document.querySelector('.intro')
box.style.color = 'red'
box.style.width = '300px'
// css 属性的 - 连接符与 JavaScript 的 减运算符
// 冲突，所以要改成驼峰法
box.style.backgroundColor = 'pink'
</script>
-
操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
<style>
.box {
width: 400px;
height: 400px;
background-color: blueviolet;
}
.box1 {
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div>犯大吴疆土者</div>
<script>
const div = document.querySelector('div')
div.className = 'box box1'
// dom 对象.className = '类名'
</script>
</body>
3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<body>
<div class="box"><img src="./images/slider02.jpg" alt=""></div>
<script>
const out = document.querySelector('.box')
out.classList.add('box1')
// 增加
out.classList.remove('box')
// 减少
out.classList.toggle('box2')
// 有这个属性就减少,没有就增加 切换
</script>
</body>
操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
<body>
<input type="text" value="18162962574">
<br>
<script>
document.querySelector('input').value = '1111111'
</script>
<input type="checkbox" class="checked">
<br>
<script>
const input = document.querySelector('.checked')
input.checked = false
</script>
<!-- 如果为true表示打√ 如果为false表示不打√-->
<button disabled>是否禁用</button>
<script>
document.querySelector('button').disabled = true
</script>
<!-- true 表示禁用 false表示不禁用 -->
</body>
间歇函数
知道间歇函数的作用，利用间歇函数创建定时任务。
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
<script>
setInterval(function () {
document.write('我是Σ(☉▽☉"a')
}, 1000)
function fn() {
document.write('瓜皮')
}
setInterval(fn, 1000)
// 具名函数
</script>
<body>
<textarea name="" id="" cols="60" rows="20">
用户注册协议
欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
</textarea>
<br>
<button class="btn">我已经阅读用户协议(5)</button>
<script>
let i = 5
const btn = document.querySelector('.btn')
let id = setInterval(function(){
i--
btn.innerHTML = `我已经阅读用户协议(${i})`
if (i<=0) {
btn.disabled = false
btn.innerHTML = '我同意'
clearInterval(id)
}
},1000)
</script>
</body>
扫一扫
2421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
