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