1.webAPI 基本认知
1.1.作用和分类
- 作用:就是使用JS去操作html和浏览器
- 分类: DOM (文档对象模型)、BOM (浏览器对象模型)
1.2.什么是DOM
-
DOM (Document 0bject Model——文档对象模型)：是用来呈现以及与任意HTML或XML文档交互的API
-
白话文: DOM是浏览器提供的一套专门用来操作网页内容的功能
-
DOM作用：
- 开发网页内容特效和实现用户交互
1.3.DOM树
- DOM树是什么
- 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
- 描述网页内容关系的名词
- 作用:文档树直观的体现了标签与标签之间的关系
1.4.DOM对象(重要)
-
DOM对象: 浏览器根据html标签生成的JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
-
-
DOM的核心思想
- 把网页内容当做对象来处理
-
document 对象
- 是DOM里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 例: document.write()
- 网页所有内容都在document里面
2.获取DOM对象
2.1获取DOM元素
-
根据CSS选择器来获取DOM元素(重点)
-
其他获取DOM元素方法(了解)
2.1.1根据CSS选择器来获取DOM元素(重点)
2.1.1.1选择匹配的第一个元素
语法:
document.querySelector('css选择器')
参数:包含一个或多个有效的CSS选择器字符串
**返回值:**CSS选择器匹配的第一个元素 ,一个HTMLElement对象。
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
<div class="three">第三个盒子</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// js 获取第一个元素
let div1 = document.querySelector('div')
let div2 = document.querySelector('.three')
let li = document.querySelector('ul li:last-child')
console.log(li)
console.log(div1)
console.log(div2)
</script>
</body>
2.1.1.2选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的NodeList 对象集合
注意点：
得到的是一个伪数组:
-
有长度有索引号的数组
-
但是没有pop() push()等数组方法
-
想要得到里面的每一个对象，则需要遍历(for) 的方式获得。
-
哪怕只有一个元素,通过querySelectAll()获取过来的也是一个伪数组， 里面只有一个元素而已
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// js 获取多个元素
let lis = document.querySelectorAll('ul li')
console.log(lis)
</script>
</body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
let lis = document.querySelectorAll('ul li')
for(let i = 0; i < lis.length; i ++ ){
console.log(lis[i])
}
</script>
</body>
2.2.1其他获取DOM元素方法(了解)
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面 所有div
document.getElementsByTagName('div')
//根据类名获取元素获取页面所有类名为w的
document.getElementsByClassName('w')
3.设置/修改DOM元素内容
目标：能够修改元素的文本更换内容
3.1document.write()
- 只能将文本内容追加到前面的位置
- 文本中包含的标签会被解析
3.2元素innerText属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
<body>
<div>
粉红色的回忆
</div>
<script>
// 1.获取标签（元素）
let box = document.querySelector('div')
//2. 修改标签（元素）内容 box是对象 innerText 属性
//对象.属性 = 值 不识别标签
box.innerText = '有点意思~'
</script>
</body>
-------------------------->>>>>>>>>>
3.3元素innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
<body>
<div class="one">
粉红色的回忆
</div>
<div class="two">
粉红色的回忆
</div>
<script>
let box1 = document.querySelector('.one')
let box2 = document.querySelector('.two')
box1.innerText = '<br><h3>前端程序员</h3>'
box2.innerHTML = '<br><h3>前端程序员</h3>'
</script>
</body>
-------------------------->>>>>>>>>>
4.设置/修改DOM元素属性
4.1设置/修改元素常用属性
-
还可以通过JS设置/修改标签元素属性，比如通过src更换图片
-
最常见的属性比如: href、title、 src 等
-
语法:
对象.属性 = 值
<body>
<img src="../../picture/webAPI_img/1.webp" alt="">
<script>
// 1.获取元素 图片
let pic = document.querySelector('img')
// 2. 修改元素属性 src 对象.属性= 值
pic.src = '../../picture/webAPI_img/2.webp'
pic.title = '我是你德哥'
</script>
</body>
4.2设置/修改元素样式属性
还可以通过JS设置/修改标签元素的样式属性。
- 比如通过轮播图小圆点自动更换颜色样式
- 点击按钮可以滚动图片,这是移动的图片的位置left等等
学习路径:
4.2.1通过style属性操作CSS
语法：
对象.style.样式属性 = 值
注意:
-
修改样式通过style属性引出
-
如果属性有-连接符，需要转换为小驼峰命名法
-
赋值的时候，需要的时候不要忘记加css单位
let box = document.querySelector('.box')
// 2.修改背景颜色
box.style.backgroundColor ='red'
box.style.width = '300px'
box.style.marginTop = '50px'
4.2.2操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐,我们可以通过借助于Css类名的形式。
语法:
// active 是一个css类名
元素.className = 'active'
注意:
1.由于class是关键字,所以使用className去代替
2.className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名
<body>
<div class="one"></div>
<script>
//1. 获取元素
let box = document.querySelector('div')
// 2. 设置样式
box.className = 'one active'
</script>
</body>
4.2.3通过classList操作类控制CSS
为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法:
// 追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素. classList.toggle('类名')
<body>
<div class="one"></div>
<script>
//1. 获取元素
let box = document.querySelector('div')
// add 是个方法 添加 追加
box.classList.add('active')
//remove 移除 类
box.classList.remove('one')
//切换类 如果没有 则添加这个类 否则删除这个类
box.classList.toggle('one')
</script>
</body>
4.3 设置/修改表单元素属性
表单很多情况，也需要修改属性,比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
- 获取: DOM对象.属性名
- 设置: DOM对象.属性名 = 新值
5.定时器-间歇函数
目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器
5.1.开启定时器
setInterval(函数，间隔时间)
作用:每隔一段时间调用这个函数
间隔时间单位:毫秒
注意点：
- 函数名字不需要加括号
- 定时器返回的是一个id数字，表示第几个定时器
<body>
<script>
// setInterval(function(){
// console.log('你好')
// }, 1000)
function show() {
console.log('我的')
}
//每隔1000毫秒调用show函数
setInterval(show, 1000)
</script>
</body>
5.2.关闭定时器
let 变量名 = setInterval(函数，间隔时间)
clearInterval(变量名)
<body>
<script>
// setInterval(function(){
// console.log('你好')
// }, 1000)
function show() {
console.log('我的')
}
let timer = setInterval(show, 1000)
//清除定时器
clearInterval(timer)
</script>
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
