目录
一.变量声明
变量声明有三个 var let 和 const：我们该使用哪个呢？
建议： const 优先，尽量使用const。const 语义化更好， 实际开发中也是，比如react框架，基本const
总结：有了变量先给const，如果发现它后面是要被修改的，再改为let
有i++,i---之类的自增自减 值就会改变，这种情况下用let
二. WebApi介绍
组成：DOM操作页面元素，BOM控制浏览器行为
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、 BOM（浏览器对象模型）
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 也就是：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
DOM作用 ： 开发网页内容特效和实现用户交互
简言之 DOM 是用来动态修改 HTML 的，其目的是开发网页特效及用户交互。
2.1 DOM树
如下图所示，将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
2.1.1 DOM 节点
节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
-
【元素节点】其实就是 HTML 标签，如上图中
head、div、body等都属于元素节点。 -
【属性节点】是指 HTML 标签中的属性，如上图中
a标签的href属性、div标签的class属性。 -
【文本节点】是指 HTML 标签的文字内容，如
title标签中的文字。 -
【根节点】特指
html标签。 -
其它...
三. DOM对象（重要）
1.DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
2. DOM的核心思想 ：把网页内容当做对象来处理
3. Document 是 DOM 里提供的一个对象,
2. document
document 是javaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心
<script>
// document 是内置的对象
// console.log(typeof document);
// 1. 通过 document 获取根节点
console.log(document.documentElement); // 对应 html 标签
// 2. 通过 document 节取 body 节点
console.log(document.body); // 对应 body 标签
// 3. 通过 document.write 方法向网页输出内容
document.write('Hello World!');
</script>四. 获取DOM对象
-
querySelector( ) 获取满足条件的第一个元素
<div class="box">123</div>
<div class="box">abc</div>
const box = document.querySelector('.box') //获取第一个2. querySelectorAll( ) 获取满足条件的元素集合 返回伪数组
<ul class="nav">
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
</ul>
const lis = document.querySelectorAll('ul li')
console.log(lis)注意点：
1. document.querySelector('#nav') 括号里面就是获取选择器，和CSS获取写法一样，获取clss类名不要忘了点
2. 伪数组 获取元素 需要for循环遍历
<ul class="nav"> <li>测试1</li> <li>测试2</li> <li>测试3</li> </ul> const lis2 = document.querySelectorAll('.nav li') for (let i = 0; i < lis2.length; i++) { console.log(lis2[i]) }
4.获取DOM元素另外的方法 - （以前的版本）
document.getElementById('nav') 专门获取元素类型节点，根据标签的 id 属性查找
document.getElementsByClassName() 根据标签的 class 属性查找
五. 操作元素内容（修改对象内容）
1.innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
2.innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。
<body>
<div class="box">我是文字的内容</div>
<script>
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改文字内容 对象.innerText 属性
// console.log(box.innerText); //获取文字内容
box.innerText = '我是一个盒子'
box.innerText = '<strong>我是一个盒子</strong>' //没有加粗，所以innerText不解析标签
// 3. innerHTML 解析标签 （其它和innerText都一样）
box.innerHTML = '<strong>我是一个盒子</strong>'
</script>
</body>运行效果：
5.2 常用属性修改：
1.直接通过属性名修改，最简洁的语法：比如通过 src更换 图片
最常见的属性比如： href、title、src 等
<script>
// 1. 获取 img 对应的 DOM 元素
const pic = document.querySelector('.pic')
// 2. 修改图片对象的属性 对象.属性 = 值
pic.src = './images/lion.webp'
pic.width = 400;
pic.alt = '图片不见了...'
</script>5.3 通过style属性修改样式：
通过修改行内样式 style 属性，实现对样式的动态修改。
通过元素节点获得的 style 属性本身的数据类型也是对象，如 box.style.color、box.style.width 分别用来获取元素节点 CSS 样式的 color 和 width 的值。
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改样式属性 对象.style.样式属性 = '值' 别忘了跟单位
// box.style.box.width = '400' ❌
box.style.width = '400px'
//注意多组单词的采取 小驼峰命名法
// box.style.background-color = 'red' ❌单词连写中间杠会被当成减号，所以不能这么写，这种有特殊方法：小驼峰命名法/任何标签都有
style属性，通过style属性可以动态更改网页标签的样式，如要遇到css属性中包含字符-时，要将-去掉并将其后面的字母改成大写，如background-color要写成box.style.backgroundColor
5.4 通过类名（className）修改样式
语法：元素.className = 'active'
<div class="nav">123</div>
// 1. 获取元素(document.querySelector 只选中符合的第一个元素)
const div = document.querySelector('div')
// 2. 添加类名 class 是个关键字 我们用 className
div.className = 'box'
// className 会直接覆盖以前的类名 是使用新值换旧值,
// 如果需要添加一个类,需要保留之前的类名效果图：修改后新类名会覆盖旧类名
5.5 通过（ classList ）修改样式
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
<div class="box wenzi">文字</div>
<script>
// 通过classList添加 classList是追加和删除 不影响以前类名·1
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 修改样式
// 2.1 追加类 add() classList 类名不加点. 并且是字符串
box.classList.add('active')
// 2.2 删除类
box.classList.remove('box')
// 2.3切换类 toggle() 有还是没有，有就删掉。没有就加上
box.classList.toggle('active')
</script>注意：className classList 因为是·通过类名操作，所以括号里类名不加点，并且是字符串
六.操作表单元素属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框；正常的有属性有取值的跟其他的标签属性没有任何区别
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
