WEB APIS（DOM对象，操作元素内容，属性，表单属性，自定义属性，定时器）

js基础基本语法：
变量，数据类型，循环，函数，对象等(主要是控制台打印）

WEB APIS 操作DOM BOM ：

控制网页元素，交互等各种网页交互效果

js高级语法：

js新增语法，高级技巧等

web api

变量声明，优先const 。const声明的变量基本不再改变，要是再改变，再修改为let。

如果是为数组/对象添加或者删除一些元素，数组地址是不变的，数组也不变，还是那个数组，所以总体是不变的，可用const。但是为整个数组重新赋值的话，就改变了，需要使用let.

web api 作用和分类：

作用：使用js去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）

前边学过的alert和prompt就是BOM，不过已经先学了

DOM树：

例如div标签，在html中叫做html标签，在js中叫做DOM对象

获取DOM对象：

css是通过选择器的方式获取，而js有自己的方式获取

注：页面标签都在document中
querySelector()括号中可以是标签，id，也可以是类名，但是都一定要记得加上引号

获取的是第一个

查询子标签中第一个：

获取所有元素然后以数组方式返回：

对象遍历使用for in ,该伪数组遍历使用for

其他获取DOM元素方法，因为不常使用了，所以作为了解即可

操作元素内容：

innerText能获取标签里边的内容，也能修改标签里的内容，但是不能解析标签

操作元素属性：

元素常用属性：例如img标签的title和src
对象.属性=值

元素样式属性：

对象.style.样式属性 = “新值”（新值一定要写单位）

当样式属性名中间用 - 连接，在修改时会报错，所以在修改时使用小驼峰命名法

操作类名（className)操作css:

如果想要修改所有元素样式，用style属性修改要一个一个样式敲很麻烦
所以直接新写一个class类选择器内容，将获取的DOM对象的className改为新的class类选择器名字

有两种情况：

一种是DOM对象没有类名，直接 div.className = 'box',直接使用新类名会覆盖以前的样式
另一种是DOM对象有类名，并且仍然还需要原类名选择器中的样式，那么就在新旧类名中间加个空格 div.className = 'box nav'

classList 操作类控制css:

使用DOM对象.className = '新类' 这样还需要去找是否有原来类，防止原来类样式被覆盖掉，所以比较麻烦。现在通过classList方式追加和删除类名

操作表单元素属性：

input中 type属性值的变化

以及value值的变化

添加表单属性：

disabled是一个布尔属性，为true时表示禁用
<button disabled> 按钮 </button>

//在js中动态添加或者移除
const button = document.querySelector('button')
button.disabled = ture //禁用按钮
button.disabled = false  //启用按钮
checked是一个布尔属性，通常用于<input>元素，特别是type='checkbox' 或type='radio'。checked 属性表示复选框或单选框是否被选中。对于 checkbox 来说，它表示是否被选中，对于 radio 来说，它表示是否是当前选中的单选项
<input type="checkbox" checked> 我同意
<input type="radio" name="gender" checked>男

const checkbox = document.querySelector('input[type='checkbox']')
checkbox.checked = true  //选中复选框
checkbox.checked = false //取消选中复选框
select是一个方法，通常用于<select>元素，表示下拉框中的选项

select是一个DOM方法，用于选择<select>元素中的选项

法会将 <select> 元素的一个或多个 <option> 元素设置为选中状态
<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>
const selectElement = document.getElementById('mySelect');
selectElement.selectedIndex = 1; // 选择索引为1的选项（即选项2）
checked名和值一样则只简写一个

checked没有则是false