dom操作初探

作者: 浮巷旧人 | 来源:发表于2018-08-02 22:59 被阅读0次

dom操作初探
DOM初探
JQuery 17
vue自定义指令初探
DOM (javascript DOM节点操作)
Vue解决了哪些问题
jQuery中的DOM操作
jQuery——DOM
jQuery中的DOM操作
会jquery 就能快速快速上手 vue？你仿佛在说笑

什么是DOM

1.DOM-->Document Object Model 文本对象模型
2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。

//dom对象
var div = document.getElementByTagName(‘div’)[0]
//document下get元素  TagName是标签名 通过标签
//名选出来 封装在类数组里 进行索引排序
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  =  "green";
        }else{
              this.style.backgroundColor  =  "red";
        }
}

//制作选项卡
<style type="text/css">
            .wrapper    div{
                display: none;
                width: 200px;
                height: 200px;
                border: 2px solid   red;
            }
            .active{
                 background-color: yellow;
            } 


    </style>
</head>
<body>
<div class="wrapper">
        <button class="active">111</button>
        <button>222</button>
        <button>333</button>
        <div class="content"
      style="display: block">1111</div>
        <div class="content">2222</div>
        <div class="content">3333</div>
</div>
 
<script type="text/javascript">
 var btn = document.getElementsByTagName('button');
 var div = document.getElementsByClassName('content');
 for (var i = 0; i < btn.length; i++) {
            (function (n) {
                btn[n].onclick = function ( ) {
                 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))
 }
</script>
</body>

var div = document.createElement('div');
document.body.appendChild(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";
setInterval(function（）{
  div.style.left = parseInt(div.style.left) + 2 + "px"
  div.style.top= parseInt(div.style.top) + 2 + "px"
}，  50)；
//这是个计时器，50代表毫秒 经历这些时间所发
//生的移动,  parseInt代表将字符串化成整数



var div = document.createElement('div');
document.body.appendChild(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";
var speed = 1;
var timer = setInterval(function（）{
   speed += speed/20;
  div.style.left = parseInt(div.style.left) + 2 + "px"
  div.style.top= parseInt(div.style.top) + 2 + "px"
  if(parseInt(div.style.top)  >  200 &&
  parseInt(div.style.left)  > 200){
  clearInterval(timer);
}，  1 0)；//距离达到一定数值，就会静止，清除计时器


<button  style="~~~~">加速</button>
var btn = document.getElementsByTagName('button')[0];
var div = document.createElement('div');
document.body.appendChild(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";
var speed = 5;
btn.onclick = function() {
  speed++;
}
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";
         break;
 }
}