23、JavaScript学习笔记——DOM初探

DOM初探

1. 什么是DOM

DOM(Document Object Model)，文档对象模型。

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

XML与HTML基本一致，但是XML可以自定义标签。

DOM是用来操控HTML和XML的，CSS是无法被操控的。

CSS无法被操控指的是，无法通过DOM去修改CSS样式表，但是可以通过间接的方式（修改HTML元素行间样式）改变元素的样式。

<div></div>
<div></div>
<div></div>
<script>
    var div = document.getElementsByTagName('div')[0];//通过标签名选中指定元素，这里选中的是第一个名为“div”的元素
    //添加行间样式
    div.style.width = "100px";  //为div对象指定的元素添加行间样式
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    var div1 = document.getElementsByTagName('div')[1];//选中第二个名为“div”的元素
    div1.style.width = '100px';
    div1.style.height = '100px';
    div1.style.backgroundColor = 'green';
    //div和div1称为DOM对象
</script>

2. DOM操作初探

2.1 onclick实例

onclick点击触发。

例2.1：根据点击次数改变样式

<div></div>
<div></div>
<div></div>
<script>
    var div = document.getElementsByTagName('div')[0];
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    var div1 = document.getElementsByTagName('div')[1];
    div1.style.width = '100px';
    div1.style.height = '100px';
    div1.style.backgroundColor = 'green';
    var count = 0;
    div.onclick = function () {
     	count ++;
        if(count % 2) {
            div.style.backgroundColor = 'blue';
            div.style.borderRadius = '50%';
        }else{
            div.style.backgroundColor = 'red';
        }
    }
</script>

例2.2：实现选项卡效果

<div class="wrapper">
    <button>Lorem.</button>
    <button>Nisi.</button>
    <button>Eveniet?</button>
    <div class="content">Lorem ipsum dolor sit amet.</div>
    <div class="content">Numquam quos magni est quo.</div>
    <div class="content">Dicta officiis quos in consequatur!</div>
</div>
<script>
    var btn = document.getElementsByTagName('button');
    var div = document.getElementsByClassName('content');  //通过类名选中元素
    var count = [0, 0, 0];
    for(var i = 0; i < btn.length; i ++) {
        (function (n) {
        	//为dom对象绑定onclick触发函数
            btn[n].onclick = function () {
                for(var j = 0; j < btn.length; j ++){
                    btn[j].className = '';
                    div[j].style.display = 'none';
                    if(j != n){
                        count[j] = 0;
                    }
                }
                count[n] ++;
                if(count[n] % 2){
                    this.className = 'click';
                    div[n].style.display = 'block';
                }else{
                    this.className = '';
                    div[n].style.display = 'none';
                }
            }
        } (i) )
    }
</script>

.wrapper div{
    display: none;
    width: 200px;
    height: 100px;
    background-color: #ccc;
    border: 2px dashed #000;
}
.click{
    background-color: lightcoral;
}

2.2 setInterval实例

定时器，setInterval(function () {}, num);，每隔num毫秒，就执行一次function函数。

例2.3: 匀速运动

<div style="width: 100px; height: 100px; background-color: #0f0; position: absolute; top: 115px; left: 10px;"></div>
<div style="width: 100px; height: 100px; background-color: #ff0; position: absolute; top: 220px; left: 10px;"></div>
<button style="position: absolute; top: 330px; left: 10px;">start</button>
<button style="position: absolute; top: 330px; left: 100px;">stop</button>
    
<script>
    var div1 = document.createElement('div');  //创建div元素
    document.body.appendChild(div1);  //将dom对象div1创建的div元素放入body元素中
    div1.style.width = '100px';
    div1.style.height = '100px';
    div1.style.backgroundColor = '#f00';
    div1.style.position = 'absolute';
    div1.style.top = '10px';
    div1.style.left = '10px';
    var div2 = document.getElementsByTagName('div')[0];
    var div3 = document.getElementsByTagName('div')[1];
    var btn1 = document.getElementsByTagName('button')[0];
    var btn2 = document.getElementsByTagName('button')[1];
    var itv1,
        itv2;
    btn1.onclick = function () {
        itv1 = setInterval(function () {
            div1.style.left = parseInt(div1.style.left) + 2 + 'px';
            div2.style.left = parseInt(div2.style.left) + 4 + 'px';
        }, 100);
        itv2 = setInterval(function () {
            div3.style.left = parseInt(div3.style.left) + 4 + 'px';
        }, 50);
    };
    btn2.onclick = function () {
        clearInterval(itv1);
        clearInterval(itv2);
    }
</script>

三个div在时间间隔setInterval的作用下以不同的速度向右匀速运动，影响速度的有时间间隔和每个时间间隔的增量。

• 红色：每隔100毫秒，绝对位置left增加2个像素；
• 绿色：每隔100毫秒，绝对位置left增加4个像素；
• 黄色：每隔50毫秒，绝对位置left增加4个像素。

停止setInterval可以使用clearInterval。

例2.4：加速运动（在固定位置停止）

<button style="position: absolute; top: 330px; left: 10px;">start</button>
    
<script>
    var div1 = document.createElement('div');  
    document.body.appendChild(div1);  
    div1.style.width = '100px';
    div1.style.height = '100px';
    div1.style.backgroundColor = '#f00';
    div1.style.position = 'absolute';
    div1.style.top = '10px';
    div1.style.left = '10px';

    var btn1 = document.getElementsByTagName('button')[0];
    var itv1;
    var speed = 1;  //初始速度

    btn1.onclick = function () {
        itv1 = setInterval(function () {
            speed += speed/10; 
            div1.style.left = parseInt(div1.style.left) + speed + 'px';
            div1.style.top = parseInt(div1.style.top) + speed + 'px';
            if(parseInt(div1.style.top) > 200 && parseInt(div1.style.left) > 200){
                clearInterval(itv1);
            }
        }, 50);
        
    };
</script>

2.3 onkeydown实例

例2.5：键盘方向键控制方块移动

<script>
    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.top = '10px';
    div.style.left = '10px';

    document.onkeydown = function (a) {
        switch(a.which) {
            case 38 : //上方向键
                div.style.top = parseInt(div.style.top) - 5 + 'px';
                break;
            case 40 :  //下方向键
                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';
        }
    }
</script>