js进阶web api
一.web api基本认知
1.什么是DOM:
dom(Document Object Model----文本对象模型)用来呈现以及与任意html或者xml文档交互的api
2.dom树
将html文档以树状结构直观的表现出来,我们称之为文档树或DOM树
描述网页内容关系的名词
直观的体现了标签与标签之间的关系
3.dom对象
浏览器根据html标签生成的js对象
所有的标签属性都可以在这个对象上面找到
修改这个对象属性会自动映射到标签身上
网页的所有内容都在document里面
打印对象
console.dir(对象变量)
4获取DOM元素
(1)根据css选择器来获取dom元素(重点)
1.1选择匹配的第一个元素
语法
document.querySelector('css选择器')
参数:
包含一个或多个有效的css选择器字符串(比如id就在前面加#,class就在前面加.)
返回值:
css选择器匹配的第一个元素,一个HTMLElement对象。
如果没有匹配到,则返回null
可以参考网站:Document - Web API 接口参考 | MDN (mozilla.org)
1.2选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
例如:
document.querySelectorAll('ul li')//表示获取ul标签里的全部li标签
包含一个或多个有效的css选择器字符串
返回值:
css选择器匹配的nodeList对象集合 (是一个伪数组)
有长度有索引,但是没有pop(),push()等数组的方法
想要得到里面的每一个对象,则需要遍历(for)的方式获得
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul class="nv">
<li>我的首页</li>
<li>产品介绍</li>
<li>联系方式</li>
</ul>
<script>
let a=document.querySelectorAll('ul>li')
for(let c=0 ;c<a.length;c++){
console.log(a[c])
}
console.log(a)
</script>
</body>
</html>
他获取dom元素方法(了解)
4设置/修改DOM元素内容
document.write()方法
对象.innerText属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
对象.innerHTML属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
5.设置/修改元素常用属性
语法:
对象.属性 =值
(对象的属性=标签的属性)
例如:
1.获取元素
let a=document.querySelector('img')//得到的是一个对象
操作元素
a.src = './images/02.jpg'
a.title='这是一个图片'
6、设置/修改元素常用属性
通过js设置/修改标签元素的样式属性。
比如通过轮播小圆点自动更换颜色样式
点击按钮可以滚动图片,这是移动的图片的位置left等等
途径:
1通过style属性操作css
2操作类名(className)操作css
如果修改的样式比较多,直接通过style属性修改比较繁琐,我们可以通过借助与css类名的形式
语法:
//active 是一个css类名
元素.className = 'active'
注意:
1.由于class是关键字,所以使用className去代替
2.className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
3通过classList操作类控制css
为了解决className容易覆盖以前的类名,我们可以通过classList方式追加和删除类名
语法:
追加一个类
元素.classList.add('类名')
删除一个类
元素.classList.remove('类名')
切换一个类:
元素.classList.toggle('类名')//有就删除,没有就添加
6.设置/修改表单元素属性
表单很多情况,也需要修改属性,比如点击眼睛,可以看见密码,本质是把表单类型转换为文本框,正常的有属性有取值的,跟其他的标签属性没有任何区别
获取:DOM对象.属性名
设置:DOM对象.属性名=新值
表单.value='用户名'
表单.type='password'
7.定时器-间歇函数
1.开启定时器
setInterval(函数,间隔时间)
作用:每隔一段时间调用这个函数
间隔时间单位是毫秒
注意:
1.函数名字不需要添加括号
2.定时器返回的就是一个id数字
关闭定时器:
let 变量名= setInterval(函数,间隔时间)
clearInterval(变量名)