5.18 笔记2

DOM操作

首先引入外部js文件

<script type="text/javascript" src="index.js"></script>

获取特殊元素

html和body元素

var bodyEle = document.body;  //获取body
var htmlEle = document.documentElement;  //获取html

事件基础

一个事件有三部分关联：

事件源：事件被触发的对象，比如按钮，输入框，图片
事件类型：触发的条件，比如鼠标点击(onclick)，鼠标经过，输入框获得焦点
事件处理程序：触发后要执行的操作，写在一个函数内，触发就运行这个函数

简单例子

按钮绑定onclick事件，点击就弹框

<body>
	<button id="btn">按钮</button>
	<script>
		var btn = dpcument.getElementById("btn");
		btn.onclick = function(){
			alert("123");
		}
	</script>
</body>

常见的鼠标事件

onclick：鼠标点击
onmouseove：鼠标经过
onmouseout：鼠标离开触发
onfocus：获得鼠标焦点

接下来以这些鼠标事件为例讲如何改变元素的属性或内容

修改元素内容

innerText

不识别html标签，改变元素内容，相当于改变双标签之间的文字内容

例子，点击按钮，在下方的div中显示当前时间

<body>
	<button id='btn'>显示当前系统时间</button>
	<div id='time-div'>时间</div>
	<script>
		//点击按钮，时间内的文字被换成当前时间
		//第一步，获取元素：按钮，div
		var btn = document.querySelector('#btn')
		var time_div = document.querySelector('#time-div')
		//第二步，注册事件
		btn.onclick = function(){
    	let d3 = new Date();
        //innerText修改标签的内容，使用Date对象获取时间
    	time_div.innerText = d3
	}
	</script>
</body>

innerHTML

一样是改变元素的内容，但是会识别html标签：W3C标准，使用的多

var time_div = document.querySelector('#time-div')
time_div.innerHTML = "<h1>innerHTML</h1>"
//会改变time_div标签的内容，而且会识别h1标签，变成标题

这两个标签是可读写的，即可以改，也可以读取标签内容

innerText会自动去掉标签名，空格，换行；innerHTML会原封不动显示

修改元素属性

一样，要先获取元素，再注册事件，来实现动态效果

<body>
<div id='color_div' style="height: 200px;width: 200px"></div>
<button id="red">红色</button>
<button id="blue">蓝色</button>
<script>
    let red_btn = document.getElementById('red')
    let blue_btn = document.getElementById('blue')
    let color_div = document.getElementById('color_div')
    red_btn.onclick = function(){
        color_div.style.backgroundColor='red';
    }
    blue_btn.onclick = function(){
        color_div.style.backgroundColor='blue';
    }
</script>
</body>

未完待续

前端 day 06 5.18 笔记2 事件，未完待续