Web API——执行事件的步骤 & 操作元素

执行事件的步骤
1.获取事件源

    var div = document.querySelector('div');

2.注册事件（绑定事件）

    div.onclick

3.添加事件处理程序（采取函数赋值形式）

    div.onclick = function (){
        console.log('checked');
    }

Javascript的DOM操作可以改变网页内容、结构和样式，可以利用DOM操作元素来改变元素里面的内容、属性等。
1.改变元素内容
element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

innerText和innerHTML区别
innerText不识别html标签，非标准，去除空格和换行
innerHTML识别html标签，符合W3C标准，保留空格和换行的

        var div = document.querySelector('div');
        div.innerText = '<strong>今天是</strong>: 2020';
        div.innerHTML = '<strong>今天是</strong>: 2020';

这两个属性可读写，可以获取元素里面的内容

2.常用元素的属性操作
innerText、innerHTML改变元素内容
src、href
id、alt、title

       <body>
       		<button id="wyx">魏雨璇</button>
       		<button id="wxy">王新宇</button><br>
       		<img src="images/wyx.jpg" alt="" title = "wyx">
       <script>
       //修改元素属性src
       //1.获取元素
        	var wyx = document.getElementById('wyx');
        	var wxy = document.getElementById('wxy');
        	var img = document.querySelector('img');
       //2.注册事件 处理程序
       		wxy.onclick = function (){
       			img.src = 'images/wxy.jpg';
       			img.title = 'wxy'
       		}
       		wyx.onclick = function (){
       			img.src = 'images/wyx.jpg';
       			img.title = 'wyx';
       		}
       </script>
       </body>  

3.表单元素的属性操作
利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

如果想要某个表单被禁用，不能再点击，用disabled，将这个按钮button禁用:

//btn.disabled = true;
this.disabled = true; //this指向的是事件函数的调用者

京东密码框案例
（1）核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
（2）一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框
（3）算法：利用一个flag变量来判断flag值，如果是1就切换为文本框，flag设置为0，如果是0就切换为密码框，

        //1.获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('eye');
        //2.注册事件处理程序
        var flag = 0;
        eye.onclick = function(){
            //点击一次之后，flag一定要变化
            if (flag == 0){
                pwd.type='text';
                eye.src = 'images/open.png';
                flag=1;//赋值操作
            }else{
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag=0;
            }
        }

4.样式属性操作
可通过JS修改元素大小，颜色，位置等样式
element.style: 行内样式操作
element.className: 类名样式操作
（1）JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor
（2）JS修改style样式操作，产生的是行内样式，css权重比较高

关闭淘宝二维码案例

    <div class="box">
        淘宝二维码
        <img src = "images/tao.png" alt="">
        <i class="close-btn">x</i>
    </div>
    <script>
        //1.获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //2. 注册事件程序处理
        btn.onclick = function(){
            box.style.display = 'none';
        }
    </script>

盒子只是隐藏，没有删掉