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(变量名)
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
