DOM
javascript组成：ESCAscript、BOM、DOM
BOM：浏览器对象模型
window：窗口
Iocation：地址栏
history：历史记录
document：文档
DOM：文档操作模型 document
定时器：
/延迟执行
setTimeout(function(){},时间);
/间隔执行
setInterval(function(){},时间);
清除定时器
clearInterval(对象);
clearTimeout(setTimeout对象);
DOM操作套路
找到元素 操作元素
1、找元素 返回元素对象
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
2、操作元素内容
var obj=document.getElementById();
非表单元素： obj.innerHTML=123
表单元素：obj.Value
3、操作元素属性
obj.setAttribute("class","btn"); 设置
obj.getAttribute("id");=>btn 获取
4、操作元素样式
obj.style.color 只可以操作行内样式
5、操作元素事件
obj.onclick=function(){}
obj.addEventListener()
同一个点击事件可以添加多个事件
1 var btn = document.getElementById('btn')
2 btn.onclick=function(){
3 this.style.color="red";
4 }
6、创建删除元素
obj.remove();
document.createElement('div');//<div></div>
下面举一堆栗子：
鼠标移上显示移走消失：
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title>无标题文档</title>
5 <script type="text/javascript" src="dom常识.js"></script>
6 </head>
7
8 <body>
9 <button onMouseOver="showdiv()" onMouseOut="hiddendiv()" onClick="alert('薛之谦最帅')">按钮</button>
10 <div id="dd" style="display: none">薛之谦</div>
11 <!--<div id="dd2"onMouseOver="showdiv()" onMouseOut="hiddendiv()" >鼠标放上去薛之谦变红</div> -->
12 </body>
13 </html>
1 function showdiv(){
2 var div=document.getElementById("dd");
3 div.style.display = "block";
4 }
5 function hiddendiv(){
6 var div=document.getElementById("dd")
7 div.style.display="none";
8 }
鼠标放上去变高变宽变红，移走恢复原样
1 function showdiv(){
2 var div=document.getElementById("dd2");
3 div.style.background="red";
4 div.style.height="200px";
5 div.style.display="block";
6 }
7 function hiddendiv(){
8 var div=document.getElementById("dd2");
9 div.style.background="white";
10 div.style.display="block";
11 }
介绍方法
window.onload=function(){}
介绍两个对象
Math:数学类
Date：时间日期类
