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