Web基础(从零开始)——DOM技术(事件三要素，修改元素属性实例：显示当前系统时间，密码可见不可见)

事件三要素：事件源、事件类型、事件处理程序

1.获取事件源：事件被触发的对象

var eyes = document.getElementById('eyes');

2.绑定事件：如何触发，什么事件（鼠标点击（onclick）、鼠标经过、键盘按下）

onclick：鼠标点击左键触发

onmouseover：鼠标经过触发

onmouseout：鼠标离开触发

onfocus：获得鼠标焦点触发

onblur：失去鼠标焦点触发

onmousemove：鼠标移动触发

onmouseup：鼠标弹起触发

onmousedown：鼠标按下触发

3.添加事件处理程序：通过一个函数赋值的方式完成

span.onclick = function() {}

JS的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变里面的内容、属性等。

1.改变元素内容：

（1）element.innerText：修改元素内容，不识别html标签

（2）element.innerHTML：修改元素内容，识别html标签

例：点击按钮显示系统时间

div.innerText显示： 

div.innerText = getDate();

div.innerHTML显示：

div.innerHTML = '<h1>' + getDate() + '</h1>';

var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            // div.innerText = getDate();
            div.innerHTML = '<h1>' + getDate() + '</h1>';
        }

        //用于获取当前系统时间
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

注：不绑定事件直接显示：

        //不绑定事件直接显示
        var p = document.querySelector('p');
        p.innerText = getDate();

 以上两个属性都是可读可写的：即可以通过element.innerText（格式不会保留）或element.innerHTML（会保留标签）显示当前内容

element.innerText和element.innerHTML的区别：

<div>
        <span>显示时间</span>
</div>
<script>
        var div = document.querySelector('div');
        console.log(div.innerText);
        console.log(div.innerHTML);
</script>

常用的元素属性：src、href、id、alt、title等都也可以通过上述方法改变

2.修改表单元素：type、value、checked、selected、disabled

3.修改样式属性：element.style：行内样式操作

                             element.className：类名样式操作

实例：输入密码，点击图标，设置密码可见和不可见

<script>
        var flag = 0; //设置一个flag值，初始为0，表示初始状态
        var eyes = document.getElementById('eyes'); //获取eye图标
        var inputpwd = document.getElementById('inputpwd'); //获取输入框
        eyes.onclick = function() {
            if (flag == 0) {
                flag = 1;
                eyes.className = 'glyphicon glyphicon-eye-close'; //修改eyes的class属性
                inputpwd.type = 'text'; //修改input的type属性
            } else if (flag == 1) {
                flag = 0;
                eyes.className = 'glyphicon glyphicon-eye-open';
                inputpwd.type = 'password';
            }
        }
</script>

 注：以上使用了bootstrap