Web API

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）表白墙（留言板）

    
    
    
    
    


    

        
表白墙
        
输入后点击提交，会将信息显示在表格中
 
        

            谁：
            
        
        

            对谁：
            
        
        

            说什么：
            
        
        
        

            提交
        
        

            撤销