DOM API

1、选中页面元素

let elem = document.querySelector('CSS选择器');

console.log(elem);

console.dir(elem);

2、事件

鼠标点击事件 onclick  鼠标移动事件 onmousemove 等等

事件源 .box，事件类型 onlick，事件处理方式 alert('hello')

let div = document.querySelector('.box');
div.onclick = function(){alert('hello');
}

3、操作元素

（1）获取/修改元素内容：innerHTML

   
abc

（2）获取/修改元素属性

（3）获取/修改表单元素属性

表单元素（input,textarea,select......）有一些普通标签没有的特殊属性

如：value属性——获取到元素里用户填写的值

    点我一下

要用 input.value，不能使用 input.innerHTML，因为——

innerHTML：得到的是标签的内容，input标签是单标签，没有内容。

如：type属性

隐藏显示密码

    隐藏密码

（4）获取/修改样式属性

修改内联样式（修改style属性的值）

例子：点击使字体变大

    
这是一个div，点击字体会变大

修改元素应用的CSS类名

例子：切换夜间模式

    
这是一个div

4、新增元素和删除元素

（1）新增元素

创建元素    document.createElement('元素');

把这个元素放到 dom 树中    尾插：appendChild(变量名);

   
这是一个div

    
11
22

（2）删除元素  removeChild(变量名);

    
11
22

5、案例

（1）猜数字 

    
请输入一个数字：
提交

（2）表白墙（留言板）

表白墙
输入后点击提交，会将信息显示在表格中
 
谁：
对谁：
说什么：
提交
撤销