DOM-获取DOM元素、修改内容和属性、定时器-间歇函数

news/2024/11/16 23:39:01/

一、Web API基本认知

1. 作用和分类

  • 作用: 就是使用 JS 去操作 html 和浏览器

  • 分类：DOM （文档对象模型）、BOM（浏览器对象模型）

2. 什么是DOM

  • DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

  • DOM是浏览器提供的一套专门用来操作网页内容的功能

  • DOM作用：开发网页内容特效和实现用户交互

3. DOM树

  • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
  • 描述网页内容关系的名词
  • 作用：文档树直观的体现了标签与标签之间的关系

4. DOM对象

  • DOM对象：浏览器根据html标签生成的 JS对象(DOM对象)

    • 所有的标签属性都可以在这个对象上面找到
    • 修改这个对象的属性会自动映射到标签身上

  • DOM的核心思想

    • 把网页内容当做对象来处理

  • document 对象

    • 是 DOM 里提供的一个对象
    • 所以它提供的属性和方法都是用来访问和操作网页内容的
      • 例：document.write()
    • 网页所有内容都在document里面

二、获取DOM对象

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

1.1 选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的第一个元素，一个HTML Element对象。如果没有匹配到，则返回null

1.2 选择匹配的多个元素

语法：

document.querySelectorAll('css选择器')

参数：包含一个或多个有效的CSS选择器字符串

返回值：CSS选择器匹配的NodeList对象集合

得到的是一个伪数组：

  • 有长度有索引号的数组
  • 但是没有 pop() push() 等数组方法
  • 想要得到里面的每一个对象，则需要遍历（for）的方式获得。

注意事项：哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已

2. 其他获取DOM元素方法

// 根据id获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素 获取页面所有div
document.getElementByTagName('div')
// 根据类名获取元素 获取页面所有类名为w的
document.getElementByClassName('w')

三、设置/修改DOM元素内容

1. document.write()方法

  • 只能将文本内容追加到</body>前面的位置
  • 文本中包含的标签会被解析

2. 对象.innerText属性

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

3. 对象.innerHTML属性

  • 将文本内容添加/更新到任意标签位置
  • 文本中包含的标签会被解析
        // 1. 获取标签（元素）let box = document.querySelector('div')// 2. 修改标签内容  box是对象  innerText是属性// 对象.属性 = 值   不识别标签box.innerText = '<strong>修改元素</strong>'// 3. innerHTML 解析标签box.innerHTML = '<strong>修改元素</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: 2px solid hotpink;vertical-align: middle;text-align: center;line-height: 30px;}</style>
</head>
<body>抽中的选手：<div></div><script>// 1. 获取元素let box = document.querySelector('div')// 2. 得到随机的名字function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let arr = ['小小','大大','霓裳','木兮','倾城','墨锦','桃花','茯苓','木槿','迷雾','仙柒','挽风','薰池','白昼','薰池','词曲','柚茶','予遥','薄年','文浅','拾心','淡忘','慕然','暮柔','千城','顾玖','星河','南尘','北宸','心音','安笙','落苑','不眠','余味','Nitia','執筆','遠客','慾朢','璎埖','Golven','Agonie','Renaitre','Farewell','Fickle']// 生成一个随机数let random = getRandom(0, arr.length - 1)// document.write(arr[random])// 3. 写入标签内部box.innerHTML = arr[random]arr.splice(random, 1)</script>
</body>
</html>

四、设置/修改DOM元素属性

1. 设置/修改元素常用属性

  • 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片
  • 最常见的属性比如： href、title、src 等
    <img src="./images/1.webp" alt=""><script>// 1. 获取元素let pic = document.querySelector('img')// 2. 修改元素属性pic.src = './images/2.webp'pic.title = '这是一张图片'</script>

刷新页面，随机显示图片

    <img src="./images/1.webp" alt=""><script>// 1. 获取图片元素let pic = document.querySelector('img')// 2. 随机得到图片序号function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}let num = getRandom(1, 6)// 3. 完成src属性赋值pic.src = `./images/${num}.webp`</script>

2. 设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性

  • 比如通过 轮播图小圆点自动更换颜色样式

  • 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

2.1 通过 style 属性操作CSS

语法：对象.style.样式属性 = 值

        // 1. 获取元素let box = document.querySelector('div')// 2. 修改背景颜色box.style.backgroundColor = 'hotpink'box.style.width = '400px'box.style.marginTop = '100px'

修改样式由style属性引出

如果属性有-连接符，需要转换为小驼峰命名法

赋值的时候不要忘记CSS单位，如px

随机背景

<!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(./images/desktop_1.jpg);}</style>
</head>
<body><script>// 随机函数function getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min}// 随机的值1-10let num = getRandom(1, 10)// 修改背景图片document.body.style.backgroundImage = `url(./images/desktop_${num}.jpg)`</script>
</body>
</html>

2.2 操作类名(className) 操作CSS

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

// active是一个css类名
元素.className = 'active'

注意：

  1. 由于class是关键字, 所以使用className去代替

  2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

2.3 通过 classList 操作类控制CSS

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

        // 追加一个类元素.classList.add('类名')// 删除一个类元素.classList.remove('类名')// 切换一个类元素.classList.toggle('类名')

3. 设置/修改表单元素属性

        表单.value = '用户名'表单.type = 'password'

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示：如果为true代表添加了该属性，如果是false代表移除了该属性。

比如：disabled、checked、selected

五、定时器-间歇函数

1. 定时器函数介绍

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动触发。例如：网页中的倒计时。要实现这种需求，需要定时器函数

2. 定时器函数基本使用

2. 1 开启定时器

        function repeat() {console.log('间歇函数')}// 每隔一秒调用repeat函数setInterval(repeat, 1000)

2. 2 关闭定时器

        let 变量名 = setInterval(函数, 间隔时间)// 清除定时器clearInterval(变量名)

注意：

  1. 函数名字不需要加括号
  2. 定时器返回的是一个id数字

用户注册倒计时

<!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><textarea name="" id="" cols="30" rows="10">用户注册协议欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看）</textarea><br><button class="btn" disabled>我已经阅读用户协议(6)</button><script>// 1. 获取元素buttonlet btn = document.querySelector('.btn')// 2. 计算逻辑// 2.1 需要一个变量来计数let i = 6// 2.2 开启定时器 间歇函数let timer = setInterval(function(){i--btn.innerHTML = `我已经阅读用户协议(${i})`if (i === 0) {// 清除定时器clearInterval(timer)// 开启按钮btn.disabled = false// 更换文字btn.innerHTML = '我同意该协议'}}, 1000)</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>QQ音乐轮播图</title><style>.img-box {width: 700px;height: 320px;margin: 50px auto;background: #000;position: relative;}.img-box .tip {width: 700px;height: 53px;line-height: 53px;position: absolute;bottom: 0px;background-color: rgba(0, 0, 0, 0.8);z-index: 10;}.img-box .tip h3 {width: 82%;margin: 0;margin-right: 20px;padding-left: 20px;color: #98E404;font-size: 24px;float: left;font-weight: 500;font-family: "Microsoft Yahei", Tahoma, Geneva;}.img-box .tip a {width: 30px;height: 29px;display: block;float: left;margin-top: 12px;margin-right: 3px;}.img-box ul {position: absolute;bottom: 0;right: 30px;list-style: none;z-index: 99;}</style>
</head>
<body><div class="img-box"><img class="pic" src="./images/b01.jpg" alt=""><div class="tip"><h3 class="text">挑战云歌单，欢迎你来</h3></div></div><script>// 数据let data = [{imgSrc: 'images/b01.jpg',title: '挑战云歌单，欢迎你来'},{imgSrc: 'images/b02.jpg',title: '田园日记，上演上京记'},{imgSrc: 'images/b03.jpg',title: '甜蜜攻势再次回归'},{imgSrc: 'images/b04.jpg',title: '我为歌狂，生为歌王'},{imgSrc: 'images/b05.jpg',title: '年度校园主题活动'},{imgSrc: 'images/b06.jpg',title: '新歌发布，5月10号正式推出'},{imgSrc: 'images/b07.jpg',title: '动力火车来到西安'},{imgSrc: 'images/b08.jpg',title: '钢铁侠3，英雄镇东风'},{imgSrc: 'images/b09.jpg',title: '我用整颗心来等你'},]// 1. 获取元素：图片和h3let pic = document.querySelector('.pic')let text = document.querySelector('.text')// i 记录图片的张数let i = 0// 2. 开启定时器setInterval(function(){i++// 修改图片的src属性pic.src = data[i].imgSrc// 修改文字内容text.innerHTML = data[i].title// 无缝连接，从头开始循环if (i === data.length - 1) {i = -1}// 三元表达式// i === 8 ? i = -1 : i}, 1000)</script>
</body>
</html>

Caroline Finish 2022/12/29


http://www.ppmy.cn/news/7697.html

相关文章

Jmeter分布式测试

Jmeter分布式测试

因为jmeter本身的性能问题&#xff0c;有时候为了尽量模拟业务场景&#xff0c;需要模拟大量的并发请求&#xff0c;此时单台压力机就显得力不从心。针对这个情况&#xff0c;jmeter的解决方案是支持分布式压测&#xff0c;即将大量的模拟并发分配给多台压力机&#xff0c;来满…
阅读更多...
linux连接器脚本前奏-基于x86(一)

linux连接器脚本前奏-基于x86(一)

从今天开始进入正文，和讲解liteos一样，我们先从连接器脚本开讲。我们知道连接器脚本描述了编译输出程序的布局，那么linux内核编译输出的布局是怎么样的呢？听我慢慢道来，关于连接器脚本的大概使用用途，可以参见 liteos链接器脚本一 liteos链接器脚本二 这里先说明一下对于…
阅读更多...
朗润国际期货：2022年财料人物、机构、商品

朗润国际期货：2022年财料人物、机构、商品

2022年财料年度人物&#xff1a; 马斯克&#xff0c;财料出场次数&#xff1a;15次 他&#xff0c;全球收入*高公司高管&#xff0c;还是前世界首富&#xff08;12月刚被挤下&#xff09;。 他&#xff0c;身兼数职&#xff0c;业务包括但不限于造电动汽车、搞社交媒体、做火…
阅读更多...
BOSS直聘自动投简历的实现过程

BOSS直聘自动投简历的实现过程

这两年疫情&#xff0c;公司业务越来越差&#xff0c;必须得准备后路了&#xff0c;每天睡前都会在直聘上打一遍招呼&#xff0c;一直到打哈欠有睡意为止...,这样持续了一周&#xff0c;发现很难坚持&#xff0c;身为一名资深蜘蛛侠&#xff0c;怎么能这样下去呢&#xff1f;于…
阅读更多...
第004课 - 项目微服务架构图

第004课 - 项目微服务架构图

文章目录 项目架构图项目架构图 外网部署就是面向公众访问的，部署前端项目。 可以有手机app，也可以有web网站。 内网部署后端系统。 客户端发送请求，请求是先来到我们的nginx集群。 nginx将请求转交给我们的后台服务。 nginx是先将请求转交给api网关。 api网关我们使用…
阅读更多...
Android ContentProvider一个标准的内容提供器的创建封装代码和使用例子

Android ContentProvider一个标准的内容提供器的创建封装代码和使用例子

如果要想实现跨程序共享数据的功能&#xff0c;官方推荐的方式就是使用内 容提供器&#xff0c;可以新建一个类去继承ContentProvider 类的方式来创建一个自己的内容提供 器。ContentProvider 类有6 个抽象方法&#xff0c;我们在使用子类继承它的时候&#xff0c;需要将这6 个…
阅读更多...
深度学习——样式迁移（笔记）

深度学习——样式迁移（笔记）

样式迁移&#xff1a;计算机视觉应用之一 1.将样式图片中的样式&#xff08;比如油画风格&#xff09;迁移到内容图片上&#xff0c;得到合成的图片 2.基于CNN的样式迁移 ①初始化合成图像&#xff0c;将其初始化内容图像。合成图像是风格迁移过程中唯一需要更新的变量X&#…
阅读更多...
React input输入相关：受控方式无法更新对象类型数据（函数式组件 useState）

React input输入相关：受控方式无法更新对象类型数据（函数式组件 useState）

假设&#xff0c;要做一个登录系统&#xff0c;需要输入账号和密码&#xff0c;账号和密码由一个对象userInfo进行管理&#xff0c;我们可以初始化一个对象 let [userInfo, setUserInfo] useState({account: "",password: "" })输入框可以采用受控方式&a…
阅读更多...
最新文章

Copyright @ 2022~2023