JavaScript(WebAPI)
目录
一.WebAPI
二.DOM
1.选中页面元素
2.事件
三.操作元素
获取修改元素内容
获取/修改表单元素属性
value
type
获取/修改样式属性
1.修改内联样式
2.修改元素应用的CSS类名
四.操作节点
1.新增元素
2.删除元素
五.小结
六.案例
1.网页版本的猜数字
2.表白墙程序
一.WebAPI
WebAPI都是浏览器给JS代码提供的功能（如果浏览器不同，api的行为也可能存在差异）
WebAPI包含了DOM和BOM
https://developer.mozilla.org/zh-CN/docs/Web/API（参考文档）
二.DOM
DOM：Document Object Model（文档对象模型）
HTML上的每一个标签，都可以映射到JS中的一个对应的对象。通过DOM让JS代码操作页面。
DOM树：
1.选中页面元素
querySelector（CSS选择器）
Document
abc
def
2.事件
事件就是针对用户的操作进行一些响应。要能够和用户交互，就要知道用户干了什么。用户做的一些动作就会在浏览器中产生一些事件（鼠标点击、鼠标双击、鼠标移动、键盘按下），代码就需要针对事件做出一反映。
事件的三个要素：
1.事件源：哪个元素产生的事件。
2.事件类型：点击、双击、移动、键盘按下.....
3.事件处理程序：事件发生之后，要执行哪个代码。（要执行的代码都是提前设定好的）
三.操作元素
获取修改元素内容
先获取到该元素，使用innerHTML属性，就能拿到元素中的内容。修改该属性就会影响到界面的属性。
获取/修改表单元素属性
表单元素（input、textarea、select...)有一些特别的属性，普通标签没有的。
value
input的值
value获取到元素里用户填写的值。
给input里面放个数字，每次点击按钮，让数字加1并显示出来。
注意：value默认情况下是一个string类型。直接加1会变成字符串拼接。
type
input的类型（文本、密码、文件、按钮等）
写一个点击可以查看密码的程序
Document
获取/修改样式属性
1.修改内联样式
修改style的值，style里的属性名字和CSS中的一致（脊柱命名换成驼峰命名即可）
例：创建一个div，每次点击，都让里面的字体放大
Document
这是第一个div，点击之后字体放大
2.修改元素应用的CSS类名
例：切换夜间模式
Document
这是第一个div，
点击之后切换模式
上述操作都是针对当前页面已有的元素进行展开的，下面是对当前页面原本没有的内容的操作。
四.操作节点
1.新增元素
a)创建一个元素
createElement
b)把这个元素放到dom树中
Document
这是第一个div
例：往无序列表中添加元素，加入到末尾。（appendChild)
补充：insertBefore把元素加到指定子元素的前面（中间位置插入）
2.删除元素
ParentElem.removeChild(childElement)
Document
- 11
- 22
五.小结
1.选中元素 querySelector/querySelectorAll
2.事件 onclick
3.修改元素内容innerHTML
4.修改元素属性 元素.属性
5.修改表单属性 元素.value 元素.type
6.元素样式 元素.style.样式名=值 元素.className=css类名
7.创建元素 createElement
8.把元素放到dom树上 appendChild
9.删除元素 removeChild
六.案例
1.网页版本的猜数字
1.生成1-100之间的随机整数
2.让用户来输入一个数字
3.根据输入数字的大小关系，给出一个提示是高了/低了/猜对了
请输入要猜的数字