变量声明
- 变量声明有三个 var let 和 const
- 建议： const 优先，尽量使用const，原因是：
- Ø const 语义化更好
- Ø 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
- Ø 实际开发中也是，比如react框架，基本const
什么时候使用let声明变量？
Ø 如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let Ø 比如 一个变量进行加减运算，比如 for循环中的 i++
1. Web API作用和分类
- l. 作用: 就是使用 JS 去操作 html 和浏览器
- 2.分类：DOM (文档对象模型)、BOM（浏览器对象模型）
2. 什么是DOM
- DOM（Document Object Model——文档对象模型）是用来呈现以及与任HTML 或 XML文档交互的API
- 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
- DOM作用:开发网页内容特效和实现用户交互
2.1获取DOM元素练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;}</style>
</head>
<body><!-- html标签 盒子 --><div class="box">666</div><div class="top"><ul><li>123</li><li>456</li><li>789</li><li>173</li><li>643</li></ul></div><script>
// querySelector 查询选择器// 获取DOM元素 //选择匹配第一个元素: document.querySelectoconst box1 = document.querySelector('.box')// 参数：包含一个或多个有效的css选择器字符串// 返回值：css选择器匹配的第一个元素，一个对象console.log(box1);// 选择匹配多个元素 document.querySelectorAllconst top1 = document.querySelectorAll('.top ul li')// 一定记得打印 打印出数组 对象集合console.log(top1);</script>
</body>
</html>3.DOM树是什么
- Ø 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- Ø 描述网页内容关系的名词
- Ø 作用：文档树直观的体现了标签与标签之间的关系
3.1 依次获取DOM对象练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul class="nav"><li>你好</li><li>我是</li><li>Superman</li></ul><script>// 第一种方法// 伪类选择器// first-child ：获取的第一行元素// nth-child(2)：第二行元素，括号里写几就是第几行，也可以用2n等来表示// last-child：最后一行元素// const nav1 = document.querySelector('.nav li:first-child')// console.log(nav1);// const nav2 = document.querySelector('.nav li:nth-child(2)')// console.log(nav2);// const nav3 = document.querySelector('.nav li:last-child')// console.log(nav3);// 第二种方法// 可以用循环输出每个元素 for循环// 获取所有元素，再循环输出const nav1 = document.querySelectorAll('.nav li')// 伪数组，所以有数组长度，就是获取 对象名.lengthfor (let i = 0; i < nav1.length; i++) {console.log(nav1[i]); //每个小li}</script>
</body>
</html>4.document 是什么？
- Ø 是 DOM 里提供的一个对象
- Ø 网页所有内容都在document里面
2. 根据CSS选择器来获取DOM元素 (重点)
-
选择匹配的第一个元素
语法：document.querySelector('css选择器')
-
参数:包含一个或多个有效的CSS选择器 字符串
-
返回值：
- CSS选择器匹配的第一个元素,一个 HTMLElement对象。
- 如果没有匹配到，则返回null。
-
选择器匹配多个元素
-
语法：
document.querySelectorAll('css选择器') -
参数:包含一个或多个有效的CSS选择器 字符串
-
返回值：css选择器匹配的NodeList 对象集合
获取一个DOM元素我们使用谁？能直接操作修改吗?
Ø querySelector() Ø 可以 2. 获取多个DOM元素我们使用谁？能直接修改吗？ 如果不能可以怎么做到修改 ？ Ø querySelectorAll() Ø 不可以， 只能通过遍历的方式一次给里面的元素做修改
1.设置/修改DOM元素内容有哪2钟方式？
- Ø 元素.innerText 属性
- Ø 元素.innerHTML 属性
1.1操作元素内容，修改元素练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="box">想要修改的内容</div><div class="first">可以解析标签</div><script>// 第一步：获取元素const box1 = document.querySelector('.box')console.log(box1);// 修改内容 对象.innerText 显示存文本，不解析标签console.log(box1.innerText ); //获取要修改的文字内容box1.innerText = '哈哈'// 第一步：获取元素 对象.innerHTML 会解析标签，多标签建议使用模版字符const first1 = document.querySelector('.first')first1.innerHTML='<strong>我能修改标签</strong>'</script>
</body>
</html>2. 两者者的区别是什么？
- Ø 元素.innerText 属性 只识别文本，不能解析标签
- Ø 元素.innerHTML 属性 能识别文本，能够解析标签
抽奖练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.all{width: 500px;height: 300px;border:1px solid rgb(245, 131, 150);}.one{color:red;}.two{color: blue;}.three{color: green;}</style>
</head>
<body><div class="all"><h1>幸福小区业主抽奖活动</h1><h2><span class="one">一等奖：？</span></h2><h3><span class="two">二等奖：？</span></h3><h4><span class="three">三等奖：？</span></h4></div><script>// 创建一个数组储存 const arr = [ '张三', '李四', '王五', '赵六', '田七'] // 生成数组随机数let random = Math.floor(Math.random() * arr.length)// 获取对象元素const one = document.querySelector('.one') one.innerHTML=`一等奖：${arr[random]}`arr.splice(random,1)console.log(arr);// 生成第二个随机数let random1=Math.floor(Math.random() * arr.length)// 获取对象const two = document.querySelector('.two')// 对象名.innerHTML='值' 修改内容，修改里面的值two.innerHTML=`二等奖：${arr[random1]}`// 删除随机数中获取到的元素arr.splice(random1,1)// 生成第三个随机数let random2=Math.floor(Math.random() *arr.length)// 获取对象const three = document.querySelector('.three')three.innerHTML=`三等奖：${arr[random2]}`arr.splice(random2,1)
</script> </body>
</html>
