DOM初探
文章目录
- DOM初探
-
- 1. 什么是DOM
- 2. DOM操作初探
-
- 2.1 onclick实例
- 2.2 setInterval实例
- 2.3 onkeydown实例
1. 什么是DOM
DOM(Document Object Model)，文档对象模型。
DOM定义了。DOM对象是由浏览器制造商定义的宿主对象一种功能对象的集合。也有人说DOM是对HTML以及XML标准编程接口。
DOM是用来操控HTML和XML的，。
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实例
<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>