目录
一、Web API 基本认知
1. 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类:
DOM
(文档对象模型)、
BOM
(浏览器对象模型)
2. 什么是DOM
DOM(Document Object Model——
文档对象模型
)是用来呈现以及与任意 HTML 或 XML文档交互的API
白话文:DOM是浏览器提供的一套专门用来
操作网页内容
的功能
DOM作用
开发网页内容特效和实现用户交互
3. DOM树
DOM树是什么
将 HTML 文档以树状结构直观的表现出来,我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用:
文档树直观的体现了标签与标签之间的关系
4. DOM对象(重要)
DOM对象:浏览器根据html标签生成的
JS对象
所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当做
对象
来处理
document 对象
是 DOM 里提供的一个
对象
所以它提供的属性和方法都是
用来访问和操作网页内容的
例:document.write()
网页所有内容都在document里面
二、获取DOM对象
目标:能查找/获取DOM对象
查找元素DOM元素就是选择页面中标签元素
1. 根据CSS选择器来获取DOM元素 (重点)
1.1 选择匹配的第一个元素
语法:
document.querySelector('css选择器‘)
参数:
包含一个或多个有效的CSS选择器
字符串
返回值:
CSS选择器匹配的
第一个元素
,一个 HTMLElement对象。
如果没有匹配到,则返回null。
多参看文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
1.2 选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器
字符串
返回值:
CSS选择器匹配的
NodeList 对象集合
例如
document.querySelectorAll('ul li')
得到的是一个
伪数组
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象,则需要遍历(for)的方式获得。
哪怕只有一个元素,通过querySelectAll() 获取过来的也是一个
伪数组
,里面只有一个元素而已
2. 其他获取DOM元素方法(了解)
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div')
//根据类名获取元素 获取页面 所有类名为w的
document.getElementsByClassName('w')
三、设置/修改DOM元素内容
目标:能够修改元素的文本更换内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的
内容
,则可以使用如下几种方式:
学习路径:
1. document.write() 方法
2. 对象.innerText 属性
3. 对象.innerHTML 属性
1. document.write()
只能将文本内容追加到 </body> 前面的位置
文本中包含的标签会被解析
//永远都只是追加操作,且只能位置</body>前
document.write('Hello World!');
document.write('<h3>你好,世界!</h3>')
2. 元素innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
//innerText 将文本内容添加 / 更新到任意标签位置
let info = document.getElementById('info')
// info.innerText = '嗨~ 小仙女!'
info.innerText = '<h4>嗨~ 小仙女!</h4>'
3. 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
//2. innerHTML属性
box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'
如果还在纠结到底用谁,你可以选择innerHTML
四、设置/修改DOM元素属性
1. 设置/修改元素常用属性
还可以通过 JS 设置/修改标签元素属性,比如通过 src更换 图片
最常见的属性比如: href、title、src 等
语法:
对象.属性 = 值
//1. 获取元素
let pic = document.querySelector('img')
//2. 操作元素
pic.src = './images/1.jpg'
pic.title = '这是一个图片'
2. 设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片,这是移动的图片的位置 left 等等
2.1 通过 style 属性操作CSS
语法:
对象.style.样式属性 = 值
例子:
let box = document.querySelector('.box')
//2. 修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '300px'
box.style.marginTop = '50px'
注意:
1. 修改样式通过
style
属性引出
2. 如果属性有-连接符,需要转换为
小驼峰
命名法
3. 赋值的时候,需要的时候不要忘记加
css单位
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. 设置/修改 表单元素 属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看到密码,本质是把表单类型转换为文本框
正常的有属性有取值的 跟其他的标签属性没有任何区别
获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值
表单.value = '用户名'表单.type = 'password'
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
比如: disabled、checked、selected
五、定时器-间歇函数
目标:能够说出定时器函数在开发中的使用场景
网页中经常会需要一种功能:每隔一段时间需要
自动
执行一段代码,不需要我们手动去触发
例如:网页中的倒计时
要实现这种需求,需要定时器函数
定时器函数可以开启和关闭定时器
1. 开启定时器
作用:每隔一段时间调用这个函数
间隔时间单位是毫秒
senInterval(函数,间隔时间)
例子:
function repeat(){
console.log('Hello World!')
}
setInterval(repeat,1000)
注意:
1. 函数名字
不需要加括号
2. 定时器返回的是一个id数字
2. 关闭定时器
let 变量名 = setInterval(函数,间隔时间)clearInterval(变量名)
一般不会刚创建就停止,而是满足一定条件再停止
注意:
1. 函数名字
不需要加括号
2. 定时器返回的是一个id数字