JavaScript DOM操作初探
一、什么是DOM？
DOM — > Document Object Model
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和css功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
DOM 是一套方法的集合的统称，也就是说 DOM 里面提供了一系列方法，这一系列方法是干什么的呢？
这一系列方法是有利于我们操作 HTML 和 XML 的。
为什么是操作 HTML 和 XML 不应该是 HTML 和 CSS 吗？
可以通过间接的方式改变 CSS 行间样式，DOM 只能操作 HTML 任何东西都操作不了 CSS。
但是 HTML 和 XML 本质上是一个东西，XML 是 HTML 最早的一个版本，最开始 XML -> Xhtml -> HTML4.0 -> HTML5.0。
xml 现在是不用了，xml 和 html 最大的不同是 xml 里面的标签是可以自定义的，比如 xml 如果想定义一个 studen 标签
<student> <name>GLee</name> <age>37</age> </studen>
xml 什么都干不了，它只能表示一种数据格式，
DOM 提供的这一套方法用来操作 HTML 和 XML的，DOM 是这一套方法的集合，所以也有人称 DOM 是 html 和 xml 的编程借口。
什么叫接口？
我这有方法，你那有东西，我这方法要操作你的东西，
DOM 就是用来链接，DOM 给出了一套方法用来操作 HTML 和 XML，编程借接口就是一个实现途径。
二、DOM简单应用
DOM 想操作 html 先选择 html，可以通过标签名的方法把 div 标签全选出来，选择之后封装到一个类数组里面
<div><div/>
<script>
var box = document.getElementsByTagName('div')[0]; // div被选择到js里面后，可以被我们操作了
console.log(box); // <div>box</div>
// 给div添加属性，选出来是一个对象叫"dom对象"，操作跟对象是一样的
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";
</script>有 dom 操作之后就可变成交互的了，交互就是我们动一下它能给我们一个反应
1、交互效果
box 代表 div，box 上面可以加一个交互效果的事件监听
<div>box</div>
<script>
var box = document.getElementsByTagName('div')[0];
box.style.width = "100px";
box.style.height = "100px";
box.style.backgroundColor = "red";
box.onclick = function(){ // "onclick"代表这个div一旦被点击了，就会触发后面的function执行
this.style.backgroundColor = 'green'; // 谁调用的函数谁是this
this.style.width = "200px";
this.style.height = "200px";
this.style.borderRadius = '50%';
}
</script>利用基础的操作就可以变得很好玩，点击一次变红色再点击一次变黄色，再点击变黄色再变红色。
第一种方法计数器的方式（颜色取模）
<div><div/>
<script>
var box = document.getElementsByTagName('div')[0];
box.style.backgroundColor = "red";
box.style.width = '200px';
box.style.height = '200px';
var count = 0; // 计数器
box.onclick = function () {
count ++; // 计数器每次都加加
if(count % 2 == 1){
this.style.backgroundColor = "yellow";
}else{
this.style.backgroundColor = "red";
}
}
</script>第二种方法
<div><div/>
<script>
var box = document.getElementsByTagName('div')[0];
box.style.backgroundColor = "red";
box.style.width = '200px';
box.style.height = '200px';
var lock = true;
box.onclick = function () {
if(lock){
this.style.backgroundColor = "yellow";
this.style.width = '200px';
this.style.height = '100px';
lock = false;
}else{
this.style.backgroundColor = "red";
this.style.width = '100px';
this.style.height = '200px';
lock = true;
}
}
</script>getElementsByTagName() 方法
document 上有方法 getElementsByTagName 通过标签名（TagName）的方式把标签选出来，
里面填写 div 就能把所有的 div 元素都选出来，选出来后封装到一个“类数组”里面，
所有 div 元素按照“类数组”的索引位进行排序，通过“类数组”的索引拿到特定的一个div
<div><div/>
<script>
var box = document.getElementsByTagName("div")[0]; // 这样div就被选到javascript里面，可以被我们操作了
console.log(box); // <div>box</div>
</script>2、选项卡
写一个稍微难一点的选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style>
ul, div{margin:0;padding:0;font-size:14px;}
section{display:block;width:300px;height:230px;margin:0 auto;}
ul{width:300px;height:30px;}
li{
list-style-type: none;
width:100px;height:30px;line-height:30px;
float:left;text-align:center;
}
.active{
width:98px;
border-top:1px solid rgba(0,0,0,.3);
border-left:1px solid rgba(0,0,0,.3);
border-right:1px solid rgba(0,0,0,.3);
background-color: #fff;
}
div{
width:298px;height:200px;text-align:center;line-height:200px;
border:1px solid rgba(0,0,0,.3);
display:none;
}
</style>
</head>
<body>
<section>
<ul>
<li class="active">HTML</li>
<li>Glee</li>
<li>JavaScript</li>
</ul>
<div style="display:block;">HTML</div>
<div>Glee</div>
<div>JavaScript</div>
</section>
<script>
var btn = document.getElementsByTagName("li");
var div = document.getElementsByTagName("div");
for(var i = 0; i < btn.length; i++){ // 循环给每个按钮一个事件
// 当btu被点击的时候执行一个函数，函数里面执行体是
// 1.让所有的btu去掉className样式，
// 2.然后让当前被点击的but加上className
btn[i].onclick = function () {
for(var j = 0; j < btn.length; j++){
btn[j].className = "";
}
this.className = "active";
}
}
</script>
</body>
</html>接着实现点那个按钮，对应的 div 显示出来
var btn = document.getElementsByTagName("li");
var div = document.getElementsByTagName("div");
for(var i = 0; i < btn.length; i++){
btn[i].onclick = function () {
for(var j = 0; j < btn.length; j++){
btn[j].className = "";
div[j].style.display = "none"; // 让所有的div都设置隐藏
}
this.className = "active";
// 然后让当前点击对应的的div显示
// 这里没法用this因为在btn里面只能用div[]
// 但是这里的div[i]不对应，因为绑定了函数不是立即执行的，一旦执行的式i就变了
div[i].style.display = "block";
}
}用立即执行函数形成一个闭包
var btn = document.getElementsByTagName("li");
var div = document.getElementsByTagName("div");
for(var i = 0; i < btn.length; i++){
(function(n){ // 用立即执行函数形成一个闭包，把i传进去
btn[i].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))
}3、小方块的运动
再写一个小方块的运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小方块的运动</title>
</head>
<body>
<script>
var div = document.createElement('div'); // 不在页面上写div了创建一个div
document.body.appendChild(div); // 把在js里创建的div插入后页面上
// 页面上有div后就可以操作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";
// 持续移动div一秒移动一下。
setInterval(function () {
div.style.left = parseInt(div.style.left) + 1 + 'px'; // div.style.left取出来的值是字符串，把字符串变成数字在加1
div.style.top = parseInt(div.style.top) + 1 + 'px';
//div.innerText = parseInt(div.style.left);
}, 50);
</script>
</body>
</html>还可以绑定键盘方向键（上:38、下:40、左:37、右:39）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小方块的运动</title>
</head>
<body>
<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.left = "0";
div.style.top = "0";
document.onkeydown = function (e) { // 绑定键盘方向键
switch(e.which){
case 38 :
div.style.top = parseInt(div.style.top) - 5 + 'px'; // 往上走top减
break;
case 40 :
div.style.top = parseInt(div.style.top) + 5 + 'px'; // 往下周top加。知道俄罗斯方块是怎么做的吗？往下按加速。
break;
case 37 :
div.style.left = parseInt(div.style.left) - 5 + 'px';
break;
case 39 :
div.style.left = parseInt(div.style.left) + 5 + 'px';
break;
}
}
</script>
</body>
</html>实现按住一个键加速怎么办？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小方块的运动</title>
</head>
<body>
<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.left = "0";
div.style.top = "0";
var time = new Date().getTime(); // 时间戳节点，该时刻的时间片。让下一次执行减去这一刻执行的时间。
var speed = 5;
// 按住加速。什么叫按住？这一秒触发时间和下妙触发事件和再触发时间，间隔时间十分短。间隔事件十分短就认为是加速了。
// 间隔时间是能求的。
// 思路：
// 让每一次按下的时候都记录一次新的时间片段，然后减去上一次执行的那个时间片段。如果时间片段小于一定的毫秒数的话，我们让一个计数器去加加，当连续小于的时候就让这个计数器连续加加。
// 如果加加到一定数的时候，我们认为是连续按了，如果再按的话就加速了。
// 然后让每一次按的时候判断一下，如果这一次按的毫秒数减去上一次按的毫秒数，如果间隙过大的话，还得让计时器重新归零。如果不重新规律怎么判断他是连续的呢？
// 这个代码比较复杂，先看一下思路！
document.onkeydown = function (e) {
switch(e.which){
case 38 :
div.style.top = parseInt(div.style.top) - speed + 'px'; // 操作这个speed就可以了
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;
}
// new Date().getTime() - time;
}
</script>
</body>
</html>3、画板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画板</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: rgba(0, 0, 0, .2);
}
li{
width:30px;
height:30px;
float: left;
list-style-type: none;
/* background-color: #B8860B; */
}
ul{
width:420px;
height:420px;
/* border:1px solid rgba(0,0,0 ,.3); */
position:absolute;
top:50%;
left:50%;
margin-left:-210px;
margin-top: -210px;
background-color: #fff;
}
</style>
</head>
<body>
<ul></ul>
<script>
var oul = document.getElementsByTagName('ul')[0];
var lis = '';
for(var i = 0; i < 196; i++){
lis += '<li img-data = "0"></li>';
}
oul.innerHTML = lis;
oul.onmouseover = function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "rgb(0 ,255, " + target.getAttribute('img-data') + ")";
target.setAttribute('img-data', parseInt(target.getAttribute('img-data')) + 20);
}
</script>
</body>
</html>
Leave a comment
0 Comments.