JS-APIs
First
变量声明
-
变量声明有三个 var let 和 const
-
var，老派写法，问题很多，基本淘汰
-
let or const ？
-
建议：const 优先，尽量使用cosnt，cosnt 语义化好
DOM
作用：就是使用JS去操作html和浏览器
分类：DOM(文档对象模型)、BOM(浏览器对象模型)
DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。
简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
DOM树
将HTML文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系
DOM对象(重要)
DOM对象：浏览器根据html标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想
- 把网页内容当做对象来处理
document 对象
-
是DOM里提供的一个对象
-
所以他提供的属性和方法都是用来访问和操作网页内容的
例如：document.write()
-
网页所有内容都在document里面
获取DOM元素
- querySelector 满足条件的第一个元素
- querySelectorAll 满足条件的元素集合 返回伪数组
- 了解其他方式
getElementByIdgetElementsByTagName
总结：
-
document.getElementById专门获取元素类型节点，根据标签的id属性查找 -
任意 DOM 对象都包含
nodeType属性，用来检检测节点类型
-
选择匹配第一个元素
语法：
<script> document.querySelector('css选择器') </script>参数：
- 包含一个或多个有效的css选择器 字符串
返回值：
- css选择器匹配的第一个元素，一个HTMLElement对象。
-
选择匹配的多个元素
语法：
<script> document.querSelectorAll('css选择器') </script>参数：
- 包含一个或者多个有效的css选择器 字符串
返回值：
-
css选择器匹配的NodeList 对象集合
-
document.querSelectorAll('ul li')
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有pop() push() 等数组方法
想要得到里面的每一个对象，则需要 for循环 遍历的方式获得
就算只有一个元素，通过
querSelectorAll()获取过来的也是一个伪数 组，里面只有一个元素而已
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取DOM元素</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">123</div>
<div class="box">abc</div>
<p id="nav">导航栏</p>
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
<script>
// 1. 获取匹配的第一个元素
// const box = document.querySelector('div')
// const box = document.querySelector('.box')
// console.log(box)
// const nav = document.querySelector('#nav')
// console.log(nav)
// nav.style.color = 'red'
// 1. 我要获取第一个小 ul li
// const li = document.querySelector('ul li:first-child')
// console.log(li)
// 2. 选择所有的小li
// const lis = document.querySelectorAll('ul li')
// console.log(lis)
// 1.获取元素
const lis = document.querySelectorAll('.nav li')
// console.log(lis)
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]) // 每一个小li对象
}
const p = document.querySelectorAll('#nav')
// console.log(p)
// p[0].style.color = 'red'
</script>
</body>
</html>
DOM修改元素内容
通过修改 DOM 的文本内容，动态改变网页的内容。
-
innerText将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。 -
innerHTML将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
总结：如果文本内容中包含 html 标签时推荐使用 innerHTML，否则建议使用 innerText 属性。
<body>
<div class="box">我是文字的内容</div>
<script>
// const obj = {
// name: 'pink老师'
// }
// console.log(obj.name)
// obj.name = 'red老师'
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改文字内容 对象.innerText 属性
// console.log(box.innerText) // 获取文字内容
// // box.innerText = '我是一个盒子' // 修改文字内容
// box.innerText = '<strong>我是一个盒子</strong>' // 不解析标签
// 3. innerHTML 解析标签
console.log(box.innerHTML)
// box.innerHTML = '我要更换'
box.innerHTML = '<strong>我要更换</strong>'
</script>
</body>
DOM修改元素常见属性
- 操作元素常用样式属性
- 操作元素样式属性
- 操作表单元素属性
- 自定义属性
操作元素常用样式属性
可以通过JS设置/修改标签元素属性，比如通过src更换图片
语法：
对象.属性 = 值
<script>
// 1. 获取 img 对应的 DOM 元素
const pic = document.querySelector('.pic')
// 2. 修改属性
pic.src = './images/lion.webp'
pic.width = 400;
pic.alt = '图片不见了...'
</script>
示例：
页面刷新，图片随机更换
需求：当我们刷新页面，页面中的图片随机显示不同的图片
分析：
①：随机显示，则需要用到随机函数
②：更换图片需要用到图片的 src 属性，进行修改
③：核心思路：
-
获取图片元素
-
随机得到图片序号
-
图片.src = 图片随机路
<body>
<img src="./images/1.webp" alt="">
<script>
// 取到 N ~ M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1)) + N
}
// 1. 获取图片对象
const img = document.querySelector('img')
// 2. 随机得到序号
const random = getRandom(1, 6)
// 3. 更换路径
img.src = `./images/${random}.webp`
</script>
</body>
操作元素样式属性
应用【修改样式】，通过修改行内样式
style属性，实现对样式的动态修改。
通过元素节点获得的
style属性本身的数据类型也是对象，如box.style.color、box.style.width分别用来获取元素节点 CSS 样式的color和width的值。
可以通过 JS 设置/修改标签元素的样式属性。
比如通过轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
-
通过style 属性操作CSS
-
操作类名(className) 操作CSS
-
通过 classList
语法：
对象.style.样式属性 = 值