-
javaScript进阶webAPI web前端api进阶DOM、BOM学习笔记day01
一、Web_API 基础认知
1. 作用和分类
作用：使用js去操作html和浏览器
分类：DOM (文档对象模型)BOM（浏览器对象模型）2. DOM
DOM(document Object Model–文档对象模型)
DOM是浏览器提供的一套专门用来操作网页内容的功能
DOM作用 ：开发网页内容和实现用户交互3. DOM 树
DOM树：将html 文档以树状结构直观的表现出来，被称为文档树或者DOM树
描述网页内容关系的名词
作用 ：直观提现标签与标签之间的关系4. DOM对象
DOM对象 ：浏览器根据html 标签生成js对象
所有标签属性都可以在这个对像上面找到
修改这个对象的属性会自动映射到标签上
DOM的核心思想：把网页内容当对象来处理
document 对象
是Dom 里提供的一个对象
它提供的方法和属性都可以用来操作网页内容 例如doucment.write()
网页所有内容都在document 里面二、获取Dom 对象
通过css 选择器来获取dom 元素
其他方法获取dom 元素
目标： 能查找/获取到DOM 对象1、通过css选择器来获取DOM元素
1.1、选择匹配元素
语法：
document.querySelector('css选择器')- 1
参数：包含一个或者多个有效css 选择器 字符串
返回值：css选择器匹配到的第一个元素，一个HTMLElenent对象
如果没有匹配到返回null
例子<div class="one">我是第一个盒子</div> <div class="two">我是第一个盒子</div> <div class="three">我是第一个盒子</div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 获取第三个div let div =document.querySelector('.three') console.log(div) // 获取第三个li let li3=document.querySelector('ul li:last-child') </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
1.2 选择匹配多个原元素
语法
document.querySelectorAll('css选择器')- 1
得到的是一个伪数组 有长度有索引号的数组
没有pop() push()等数组方法
里面得到的每一个对象，则需要遍历（for）的方式获得。<ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> // 同时获取多个li let lis=document.querySelectorAll('ul li') document.write(lis) console.log(lis) // 遍历 for (let i=0;i<lis.length;i++){ console.log(lis[i]) } </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
案
2. 其他方法获取DOM元素
// 通过id获取元素 document.getElementById('nav') // 根据标签获取一类元素 document.getElementByTagName('div') // 根据类名获取元素 document.getElementByClassNmae('w')- 1
- 2
- 3
- 4
- 5
- 6
3 设置 /修改Dom 元素内容
document.write() 方法
对象innerText 属性
对象innerHTML 属性
目标:修改元素文本更换内容3.1、document.write()
只能将文本内容追加到前面的位置
文本中包含的标签会被解析
案例// 永远都只能是追加操作，且只能在</body>前 document.write("Hellow World!"); documnet.write(<h2>你好世界！</h2>>);- 1
- 2
- 3
3.2 元素innerText 属性
将文本内容添加/更新到任意标签位置
将文本包含的标签不会被解析案例
<html> <head> <meta charset="utf-8"> <title></title> <style> .box1{ width:300px; height:200px; background: skyblue; } .box2{ width: 300px; height: 200px; background-color: coral; } </style> </head> <body> <div class=box1> 修改内容box1 </div> <div class=box2> 修改内容box2 </div> <script> // 1 获取标签 let box1 = document.querySelector('.box1') let box2 = document.querySelector('.box2') // 修改标签内容 box1.innerText='使用innerText修改' box2.innerHTML='使用innerHTML修改' </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
小结
1.设置/修改DOM元素内容有哪3钟方式?
document.write()方法
元素.innerText属性
元素.innerHTML属性
2.三者的区别是什么?
document.write()方法只能追加到body中
元素.innerText 属性只识别内容，不能解析标签
元素.innerHTML属性―能够解析标签
如果还在纠结到底用谁，你可以选择innerHTML案例：
随机点名
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ display:inline-block; width:150px; height:30px; border: 3px solid red; vertical-align: middle; } </style> </head> <body> <h1>随机点名案例</h1> 抽中的帅哥： <div> </div> <script> // 获取dom 对象 let div =document.querySelector('div'); // 数据数组 let array=['赵大','钱儿','孙三','李四','周五','吴六','郑七','王八']; // 随机函数 function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min } //获取随机数 let random = getRandom(0,array.length-1); // 将数据写入对象 div.innerHTML=array[random]; </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
4 设置/修改DOM元素属性
4.1 设置/修改元素常用属性
- 剋通过js设置修改标签的元素属性，比如 通过css更换图片
- 最从常见的属性比如 href \title \src 等
- 语法
对象.属性=值- 1
例：
<body> <img src="./imgs/bg2.jpg" alt=""/> <script> // 获取元素 let pic=document.querySelector('img'); // 修改元素属性 src pic.src='./imgs/1bg.jpg'; </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
案例：
实现每次刷新页面随机更换图片<body> <img src="img/1bg.jpg" alt=""> <script> // 获取图片元素 let pic=document.querySelector('img') // 随机函数 function getRandom(min, max){ return Math.floor(Math.random()*(max-min+1))+min } let num = getRandom(1,7) // 修改src pic.src=`./img/${num}bg.jpg` </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
4.2 通过js 设置修改样式属性
1、通过style 属性操作css
语法：对象.sytle.样式属性=值- 1
案例 ：修改盒子属性
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 300px; height: 200px; background-color: aquamarine; } </style> </head> <body> <div> </div> <script> //获取对像元素 let box =document.querySelector('div'); // 修改背景属性 box.style.background = 'red' // 修改宽度 box.style.width='500px' </script> </body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
案例 ，刷新页面随机更换背景<html> <head> <meta charset="utf-8"> <title></title> <style> body{ background-image: url(img/1bg.jpg); } </style> </head> <body> <script> let body=document.querySelector('body') function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min } let num = getRandom(1,7) body.style.backgroundImage=`url(img/${num}bg.jpg)`; </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
2、通过操作类名（className）操作css<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 500px; height: 200px; background-color: aquamarine; } .active{ width: 300px; height: 100px; background-attachment: fixed; margin-left: 100px; } </style> </head> <body> <div> </div> <script> let box = document.querySelector('div'); box.className='active' </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
使用className 优点：可以同时修改多个样式
注意事项：直接使用className 会覆盖以前的类名
3、通过classList操作css
为了解决classNam容易覆盖以前的类名，可以使用classList方式来追加和删除类名
语法：// 追加一个类 元素.classList.add('类名') // 删除一个类 元素.classList.remove('类名') // 切换一个类 元素.classList.toggle('类名')- 1
- 2
- 3
- 4
- 5
- 6
案例：
<html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 400px; height: 200px; background-color: aqua; margin-left: 50px; } .active{ width: 500px; height: 400px; background-color: coral; margin-top: 100px; } </style> </head> <body> <div class="one"></div> <script> let box=document.querySelector('div') // box.classList.add('active') // box.classList.remove('one') box.classList.toggle('active') </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
4.3 表单属性修改
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="password" value="print"> <button>显示模式</button> <input type="checkbox" name="one1" class="one" checked="true"> <script> let input=document.querySelector('input'); console.log('input.vlaue'); input.value='黄剑杰'; input.type='text' let btn =document.querySelector('button'); btn.disabled=false let checkbox=document.querySelector('.one') checkbox.checked=false; </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
5 定时器
5.1 间歇函数
目标：能够使用定时器
间歇函数可以开启和关闭定时器。
1、开启定时器setInterval(函数，间隔时间)- 1
作用：每隔一段时间调用这个函数
将时间单位事毫秒。
例：每隔1000毫秒在屏幕输出 一句话<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function print(){ document.write("你好 世界") } setInterval(print,1000) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2、关闭定时器
语法：let 变量名 =setInterval(函数，间隔时间） clearInterval(变量名)- 1
- 2
- 3
案例：
代码<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <textarea name="text" id="textarea" cols="30" rows="10"> 用户注册协议 等待时间结束可以点击同意 欢迎哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </textarea><br /> <button class="agree" disabled>我已阅读并同意用户协议（60）</button> <script> let btn=document.querySelector('.agree') let i = 60; // 开定时器 function dao(){ i--; btn.innerHTML=`我已阅读并同意用户协议（${i}）` if (i===0){ clearInterval(timer) // 开启按钮 btn.disabled=false; btn.innerHTML='我已阅读并同意该协议' } }; let timer = setInterval(dao,1000); </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
综合案例
代码：<html> <head> <meta charset="utf-8"> <title></title> <style> .tip{ position: relative; margin-top: 0px; width: 800px; height: 30px; background-color: beige; float: inherit; } </style> </head> <body> <div class="img-box"> <img src="img/bg01.jpg" class="pic" alt=""> <div class="tip"> <h3 class="text">第一张图片</h3> </div> </div> <script> let data =[ { imgSrc:'img/bg01.jpg', title:'第一张' }, { imgSrc:'img/bg02.jpg', title:'第二张' }, { imgSrc:'img/bg03.jpg', title:'第三张' }, { imgSrc:'img/bg04.jpg', title:'第四张' }, { imgSrc:'img/bg05.jpg', title:'第五张' }, { imgSrc:'img/bg06.jpg', title:'第六张' }, ] // 获取元素对象 let pic = document.querySelector('.pic') let text=document.querySelector('.text') // i 记录图片序号 let i =0; // 开启定时器 function dao(){ i++; // 图片变换 pic.src=data[i].imgSrc; // 修改标题 text.innerHTML=data[i].title; // if(i===5){ i=-1; } } setInterval(dao,1000) </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
效果图
-
相关阅读:
ssdp协议搜索GB28181设备
玩转“产业生态”，长城汽车森林生态很“未来”
Matplotlib基础
使用VBS编写xshell/SecureCRT自动化脚本
游戏本地化以拓展海外市场
iOS开发：内存管理
【LeetCode刷题笔记】双指针
int, long long, double, float 等数据类型的长度及范围整理
数据挖掘 决策树
SpringMVC 始+五种数据提交的方法
- 原文地址：https://blog.csdn.net/hjjshua/article/details/125430840