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>
未完待续