JavaScript--WebAPI查缺补漏
文章目录
- 1、web APIs
- 1.作用
- 2.DOM简介
- 3. document 对象
- 4.利用css选择器来获取DOM元素
- 5.选择指定css选择器的所有元素
- 2、操作元素内容
- 1.innerText
- 2.innerHTML
- 3.操作类名(className) 操作CSS
- 4.通过 classList 操作类控制CSS
- 5.==自定义属性(重要)==
- 6.定时器-间隔函数
提示:以下是本篇文章正文内容,下面案例可供参考
1、web APIs
1.作用
JavaScript 去操作页面文档和浏览器
2.DOM简介
DOM(Document Object Model——文档对象模型)
**作用:**DOM用来 操作网页文档,开发网页特效和实现用户交互
DOM的核心思想就是把网页内容当做对象来处理,通过对象的属性和方法对网页内容操作
3. document 对象
是 DOM 里提供的一个对象,是DOM顶级对象
作为网页内容的入口
所以它提供的属性和方法都是用来访问和操作网页内容的
例:document.write()
4.利用css选择器来获取DOM元素
// 利用css选择器来获取DOM元素
// 1. document.querySelector() 选择指定css选择器的第一个元素
// 1.1 参数是字符串的css选择器
const box = document.querySelector('div')
console.log(box)
// 1.2 返回值是dom对象
console.log(typeof box) // object
console.dir(box)
const box = document.querySelector('.box')
console.log(box)
const li = document.querySelector('ol li')
console.log(li) // 只选择满足条件的第一个元素li
const li = document.querySelector('ol li:nth-child(2)')
console.log(li) // 选择第2个小li
// 1.3 如果获取不到则返回 null
const p = document.querySelector('p')
console.log(p) // null
5.选择指定css选择器的所有元素
// 2. document.querySelectorAll() 选择指定css选择器的所有元素
// 2.1 参数还是字符串的css选择器
const lis = document.querySelectorAll('.nav li')
// 2.2 返回值是一个伪数组里面包含了所有的dom对象 li
console.log(lis)
// 2.3 伪数组
// (1) 有长度和索引号
// (2) 没有数组的一些常用方法 比如 push pop splice等方法
// lis.push(1)
// console.log(lis) // 因为lis是伪数组无法使用push方法所以报错
// 2.4 利用循环遍历伪数组得到里面的每一个元素对象
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 里面的每一个元素对象
}
// 2.5 即使只有1个元素,我们querySelectorAll 获得的也是一个伪数组,里面只有1个元素而已
const boxs = document.querySelectorAll('.box')
console.log(boxs)
2、操作元素内容
DOM对象可以操作页面标签,所以本质上就是操作DOM对象(增删改查)
如果想要操作标签元素的内容,则可以使用如下2种方式:
1.对象.innerText 属性
2.对象.innerHTML 属性
1.innerText
innerText
将文本内容添加/更新到任意标签位置,文本中包含的标签不会被解析。
<script>
// 操作DOM元素内容
// 1. 对象.innerText 增删改查
// 1.1 查
console.log(box.innerText) // 古丽扎娜
// 1.2 改
box.innerText = '迪丽热巴'
// 1.3 增
const box1 = document.querySelector('.box1')
console.log(box1)
box1.innerText = '佟丽丫丫'
// 1.4 删 给空字符串可以删除内容
box.innerText = ''
box1.innerText = ''
</script>
2.innerHTML
innerHTML
将文本内容添加/更新到任意标签位置,文本中包含的标签会被解析。
<script>
// 2. 对象.innerHTML 会解析标签
box.innerHTML = '<strong>迪丽热巴</strong>'
</script>
3.操作类名(className) 操作CSS
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助于css类名的形式
**核心:**把多个样式放到css一个类中,然后把这个类添加到这个元素身上
<script>
// 通过类名操作元素样式
// 1. 获取box盒子
const box = document.querySelector('.box')
// 2. 利用类名操作元素样式
// box.className = 'circle'
box.className = 'box circle'
// 3. 利用类名操作样式添加的新的类名会覆盖掉原先的类名
</script>
注意:
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
4.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
<script>
// 1. 获取box盒子
const box = document.querySelector('.box')
// 2.通过classList操作元素样式(推荐)
// 2.1 追加类名
// box.classList.add('circle')
// 2.2 删除类名
// box.classList.remove('box')
// 2.3 切换类名: 如果元素身上有这个类名,那么就删除,如果没有这个类名则添加
box.classList.toggle('circle')
</script>
5.自定义属性(重要)
标准属性: 标签天生自带的属性 比如class、id、title等, 可以直接使用点语法操作比如:对象.title
自定义属性:
- 在html5中推出来了专门的data-自定义属性
- 使用场景:通过自定义属性可以存储数据,后期可以使用这个数据
- 在标签上一律以data-开头
- 在DOM对象上一律以dataset对象方式获取
<script>
// 自定义属性
// 1. 获取盒子
const box = document.querySelector('.box')
// 2. 得到自定义属性值
// console.log(box.dataset) // 得到一个对象集合
// console.log(box.dataset.id) // 1
// console.log(box.dataset) // 得到一个对象集合
// eg:<div id="myDiv" data-user-id="12345" data-user-name="JohnDoe" data-role="admin"></div>
console.log(box.dataset.userName) // box
</script>
6.定时器-间隔函数
setInterval
是 JavaScript 中内置的函数,它的作用是间隔固定的时间自动重复执行另一个函数,也叫定时器函数。
开启定时器:
<script>
setInterval(function () {
console.log('我是1秒钟执行一次')
}, 1000)
</script>
关闭定时器
<script>
let timer = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer) // 1
let timer1 = setInterval(repeat, 1000) // 注意调用的时候直接写函数名字不需要写小括号
console.log(timer1) // 2
// 2. 关闭定时器
clearInterval(timer)
</script>