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：时间日期类