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>