dom操作初探
2018-08-02 本文已影响0人
浮巷旧人
什么是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;
}
}
