Web Api基本认知
作用和分类
作用: 使用js去操作html和浏览器
分类 DOM(文档对象模型) BOM(浏览器对象模型)
什么是DOM
document object model 文档对象模型
用来呈现 以及于任意的HTML与XML交互的API
浏览器提供的专门操作网页内容的功能
作用:开发网页内容特效和实现用户交互
DOM树
将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
文档树更加直观提现标签与标签之间的关系
![DOM树](https://i-blog.csdnimg.cn/blog_migrate/184f0358020e503b8e11dd323282c3e8.png)
DOM对象
根据html标签生成的js对象
所有的标签属性都可以在DOM对象上找到
修改DOM对象的属性,可以映射到标签身上
DOM核心思想: 把网页内容当作对象来处理
document对象
是DOM里提供的一个对象
用来访问和操作网页内容
网页的所有内容都在document对象里边
获取DOM对象
querySelector 获取匹配的第一个元素 没有匹配到返回null
querySelectorAll 获取匹配的所有元素
返回的是NodeList对象集合(伪数组)
伪数组有长度有索引,没有pop(),push()等数组方法
其他方法获取DOM元素
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6a0c2582a7ad4fa8dbb38b86cf8fd7e8.png)
设置/修改DOM元素内容
document.write() 方法
将文本内容追加到</body>前面的位置
文本中包含的标签会被解析
追加操作
对象.innerText 属性
对象.innerHTML 属性
let div = document.querySelector('div')
console.log('div', div);
div.innerHTML = '<strong>有点意思</strong>'
设置/修改DOM元素属性
常用属性
href title src属性
语法 对象.属性=值
let imgs = document.querySelector('img')
imgs.src = './images/1.webp'
imgs.title = '这是标题'
样式属性
通过style操作css
let box = document.querySelector('div')
box.style.backgroundColor = 'hotpink;'
box.style.marginTop = '200px'
box.style.width = '600px'
className操作css
let box = document.querySelector('div');
box.className = 'one active'
classList操作css
追加一个类元素.classList.add('类名')
删除一个类 元素.classList.remove('类名')
切换一个类 元素.classList.toggle('类名')
是否含有某个类名 元素.classList.contains('类名')
box.classList.toggle('one')
表单元素属性
表单.value='新值'
表单.type='password'
disabled、checked、selected 为true或false
定时器-间歇函数
每隔一段时间自动执行代码,不需要手动触发
开启定时器 setInterval(函数,间隔时间)
关闭定时器 clearInternal(变量名)
单位是毫秒
函数名字不需要加括号
定时器返回的是一个id数字
function fn() {
console.log('我是间歇函数');
}
let timer = setInterval(fn, 1000)
console.log('打印接过来的后的值', timer);
clearInterval(timer)