dom定义了表示和修改文档所需的方法。dom对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。dom是对html和xml的标准变成接口

dom对象只能让js操作html，xml是html的脚本，里面的标签可以自定义，现在不用了 onclick一旦被点击就被执行，js里面不能写-，所以用大驼峰解决如backColor

// dom对象只能让js操作html，xml是html的脚本，里面的标签可以自定义，现在不用了

// onclick一旦被点击就被执行，js里面不能写-，所以用大驼峰解决backColor,

/* 例3 */
<head>
 <!-- <style type="text/css">
        .content{
            display:none;
            width:200px;
            height:200px;
            border:2px solid red;
        }
        .active{
            background-color:yellow;
        }
        </style> -->
</head>

<body>
<!-- 例1例2 -->
    <div></div>
    
<!-- 例3 -->
        <!-- <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <div class="content" style="display:block">飞机</div>
        <div class="content">火车</div>
        <div class="content">高铁</div> -->

<script type="text/javascript">

// dom对象只能让js操作html，xml是html的脚本，里面的标签可以自定义，现在不用了
// onclick一旦被点击就被执行，js里面不能写-，所以用大驼峰解决backColor,

// 例1
// var div = document.getElementsByTagName('div')[0];
// div.style.width="100px";
// div.style.height="100px";
// div.style.backgroundColor="red";

// div.onclick = function() {
//     this.style.backgroundColor = "green";
//     this.style.height="300px";
//     this.style.width="400px";
//     this.style.borderRadius="50%";
// }

// 例2 点击一次变一次色，用计数器

// var div = document.getElementsByTagName('div')[0];
// div.style.width="100px";
// div.style.height="100px";
// div.style.backgroundColor="red";

// var count=0;
// div.onclick = function() {
//    count++;
//    if(count%2 ==1) {
//        this.style.backgroundColor = "pink";
//    }else{
//        this.style.backgroundColor="orange";
//    }
// }

没有点击的效果

屏幕截图 2021-05-27 214322.jpg

点击第一次

屏幕截图 2021-05-27 214437.jpg

点击第二次

屏幕截图 2021-05-27 214454.jpg

例2，函数实现按钮点击效果

例3

var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0;i<btn.length;i++) {
    (function(n){
        btn[n].onclick=function(){
        // 首先把同伴的class去掉
           for(var j=0;j<btn.length;j++){
             btn[j].className="";
             div[j].style.display="none";
          }
        this.className="active";
        div[n].style.display="block";
      }
    }(i))
}

dom初探例3-06-11 071347.jpg

例4 在js里面创建div

var div = document.createElement('div');//页面没有
document.body.appendChild(div);//给页面加div,方便操作
div.style.width="100px";
div.style.height="100px";
div.style.backgroundColor="red";
div.style.position="absolute";
div.style.left="0";
div.style.top="0";

上式以下通用

1）定时器功能：每隔数个毫秒执行一次函数setInterval

var speed=1;
setInterval(function (){
    speed += speed/100;//加速运动,加的数自己定
    div.style.left = parseInt(div.style.left)+ speed +"px";
    div.style.top = parseInt(div.style.top)+ speed +"px";
},20);

2）指定时间停

var speed=1;
var timer = setInterval(function (){//timer到指定时间停
    speed += speed/100;
    div.style.left = parseInt(div.style.left)+ speed +"px";
    div.style.top = parseInt(div.style.top)+ speed +"px";
    if(parseInt(div.style.top) > 200 && parseInt(div.style.left) >200){
        clearInterval(timer);
    }
},20);

3）绑定几个小事件

document.onkeydown = function(e) {//键盘敲击事件
   switch(e.which) {
       case 38://往上走的时候出现的which值
           div.style.top = parseInt(div.style.top) -5 + "px";
           break;
       case 40://往下走的which值
           div.style.top = parseInt(div.style.top) +5 +"px";
           break;
       case 37://往左走的时候
           div.style.left = parseInt(div.style.left) -5 +"px";
           break;
       case 39://往右走
           div.style.left=parseInt(div.style.left) +5 +"px";


   }
}

4)摁住加速

var speed = 5;
document.onkeydown = function(e) {
   switch(e.which) {
       case 38:
           div.style.top = parseInt(div.style.top) -speed + "px";
           break;
       case 40:
           div.style.top = parseInt(div.style.top) +speed +"px";
           break;
       case 37:
           div.style.left = parseInt(div.style.left) -speed +"px";
           break;
       case 39:
           div.style.left=parseInt(div.style.left) +speed +"px";
   }
}

dom1-3个例子

**例2，函数实现按钮点击效果 **

例2，函数实现按钮点击效果