1、事件源:哪一个标签需要发生动态改变(制作时需要获取元素改变元素和被改变元素);
2、事件类型:指对标签执行的一系列静态页面的操作行为:如:点击、悬浮、触发未弹回、触发弹回等......
3、事件处理程序:利用函数的方法去传参改变相应数值;
1、innertext改变页面内容案例(通过注册事件去改变)
<button id="bt">现在当前的时间</button>
<div>点击查询</div>
<script>
var but = document.getElementById('bt');
var div = document.querySelector('div')
but.onclick = function() {
div.innerText = timeYear();
}
var timeYear = function getTime() {
//系统内定的时间不需要进行传参操作
// 实例化一个日期对象
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
//利用三目运算符进行补零操作
var hours = time.getHours();
var hours = hours < 10 ? '0' + hours : hours;
var m = time.getMinutes();
var m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
var s = s < 10 ? '0' + s : s;
return '现在是' + year + '年' + month + '月' + date + '日 ' + hours + ':' + m + ':' + s;
}
</script>
同时我们也可以不用点击直接实现注册事件
var p = document.querySelector('p');
p.innerText = timeYear();
页面加载出来即更新……
JavaScript的 DOM操作元素可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
1改变元素内容
element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
elenent. innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行