javascript系列教程（二）
innerHTML和innerTextd的用法
JS常见事件
操作div的任意样式
下一篇开始JS的数据类型介绍
这两个都是对元素的一个操作，简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，innerText只能修改文本值。 给获取到的元素⼀些内容，document.getElementById(‘id名’).innerHTML=‘内容’。
效果：本来div标签下面是没有文字的，获取标签后给到元素文字显示。
Js事件就是我们的行为能被侦测到，且触发相应的函数（函数里面写上事件的行为）
1. onmouseover ⿏标被移到某元素之上
2. onmouseout ⿏标从某元素上⾯移开
3. onchange 元素值改变，⼀般⽤在表单元素上
4. onkeydown ⽤户按下键盘按键
5. onfocus 元素获得焦点
6. onblur 元素失去焦点
7. window.onload ⻚⾯加载完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见JS事件</title>
<style type="text/css">
#tim{
width:300px;
height:300px;
background:red;
margin: 0 auto;
}
</style>
</head>
<body>
<input type="" name="" id="xd">
<div id="tim"></div>
<script type="text/javascript">
document.getElementById("tim").onclick=function{
//函数里面写我们要做的事情
alert("我是被点击了")
}
//鼠标移入事件
document.getElementById("tim").onmouseover=function(){
//当鼠标移入红框控制台输出下面数字。
console.log("鼠标移入")
}
//鼠标移出事件
document.getElementById("tim").onmouseout=function(){
//当鼠标移入红框控制台输出下面数字，鼠标移入移除会在控制台显示下面的文字。
console.log("鼠标移出")
}
//onchange 元素值改变，⼀般⽤在表单元素上
document.getElementById("xd").onchange=function(){
console.log(document.getElementById("xd").value)
}
//onkeydown ⽤户按下键盘按键
document.getElementById("xd").onmouseout=function(){
console.log("键盘按下了")
}
//onfocus 元素获得焦点事件，获取到焦点就是当你把鼠标放进输入框，之后点击一下，鼠标变成一条竖线之后输入的那种。
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动手操作DIV样式</title>
<style type="text/css">
#tim{
width:100px;
height:100px;
background:black;
margin:0 auto;
}
</style>
</head>
<body>
<button id="taller">增高</buttom>
<button id="longer">增长</buttom>
<button id="changebg">改变背景颜色</buttom>
<div id="tim"></div>
<script type="text/javascript">
//window.onload,在文档加载完之后执行，要养成好习惯写这个
window.onload=function(){
//给增高按钮增加事件
document.getElementById("taller").onclick=function(){
// 获取ID为tim的div,点一下增高按钮长度就会增加
document.getElementById("tim").style.height="300px"
}
document.getElementById("longer").onclick=function(){
// 获取ID为tim的div
document.getElementById("tim").style.width="300px"
}
document.getElementById("changebg").onclick=function(){
// 获取ID为tim的div
document.getElementById("tim").style.background="yellow"
}
}
</script>
</body>
</html>