操作元素 修改元素内容

下面是一个修改时间的案例：通过按钮触发显示时间的事件

1.首先获取元素

2.注册事件

此外 元素可以不添加事件，结果就是网页刷新后直接显示结果

innerText用来修改元素的内容 

<button type="button">显示当前系统时间</button>
		<div>某个时间</div>
		<p>123</p>
		<script type="text/javascript">
		//1.获取元素
			var btn = document.querySelector('button');
			var div = document.querySelector('div');
		//2.注册事件
			btn.onclick = function() {
				div.innerText = getDate();
			}
			
			function getDate() {
				var date = new Date();
				
				var year = date.getFullYear(); //获取当前日期的年
				var month = date.getMonth() + 1;  //获取当前日期的月  记得+1，月份由0-11。
				var day = date.getDate();   //获取日
				
				var xq = date.getDay();
				var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
				return '今天是:' + year + '年' + month + '月' + day + '日' + arr[xq];
			}
			
			//元素可以不用添加事件
			var p = document.querySelector('p');
			p.innerText = getDate();
		</script>

 

 

innerText与innerHTML的区别：

1.innerText获取从起始到终止的全部内容 不识别html标签   非标准 去除空格和换行

<div></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.innerText = '<strong>今天是:</strong> 2019';
            
		</script>

innerHTML获取从起始到终止的全部内容  可以识别html标签  w3c标准 保留空格和换行 

<div></div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.innerHTML = '<strong>今天是:</strong> 2019';
            
		</script>