学习DOM以及弹幕的实现案例
DOM的定义
DOM（Document Object Model）是文档对象模型，是一组用来描述JS代码怎样与HTML文档进行交互和访问的web标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式、以及行为。
现在操作DOM可能已经落后了，但DOM里面还是很多是值得我们去学习的。对于DOM的学习，如果是仔细钻研的话，可能需要大量的时间；如果想快速的了解DOM，可以从四个方面入手：
1）操作节点
操作元素节点
操作属性节点
操作文本节点
2）操作CSS
操作css类
操作css行内样式
3）事件
4）定时器
对于学习DOM
对于DOM的操作，我的理解是首先你要知道你需要在什么操作节点上进行什么操作，就例如：你定义一个button，想要通过鼠标点击来alert，就是弹出一句话，那么你就可以给这个button注册一个点击事件，在这个点击事件里，发生了一个弹出一句话的这件事。其次要看看你想要操作的节点的效果对同一级别的兄弟元素有没有什么影响，例如有一堆button，你想要通过点击某一个button，让它的背景颜色由本来的蓝色变成红色，然后你再点击其它button，让第一个被点击过的button的样式变回原来的蓝色的同时第二个被点击的button则由蓝变红色(下面第一个案例就是实现这个效果)。当你知道你想要的对什么进行操作，对其它元素有无影响后，就会发现DOM变得简单了。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
*{
margin:0;
padding:0;
}
ul{list-style-type:none;}
li{
width:50px;
height:50px;
line-height:50px;
text-align:center;
border:6px solid skyblue;
border-radius:50%;
float:left;
background-color:#ccc;
}
li:hover{
cursor:pointer;
}
li.on{
background-color:gold;
border:6px solid lawngreen;
}
style>
head>
<body>
<ul>
<li class="on">1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
ul>
body>
<script>
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
// 改变别人的模式，一刀切 去掉所有的on
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
// 改变自己的样式 this代表当前的事件源
this.className="on"
}
}
script>
html>
下面用两种方式实现弹幕的例子来更直观的展示DOM的操作：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
style>
head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
body>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var timer=null;
var words=document.getElementById("words").value;
// 创建span标签
var span=document.createElement("span");
// 将输入的内容塞到HTML中
span.innerHTML=words;
// 给span标签定位
span.style.position="absolute";
span.style.left="600px";
// 利用随机数，来决定每一个标签的高度的不同
// Math.floor是让小数取整，例如1.99为1
// document.documentElement.clientHeight代表HTML标签的高度
span.style.top=Math.floor(document.documentElement.clientHeight*Math.random())+"px";
// 将span挂载到树上
document.body.appendChild(span);
timer=setInterval(function(){
// 让span标签一次走4px的像素
span.style.left=parseInt(span.style.left)-4+"px"
// 表示当span的左边的距离小于span内容的长度时销毁，即当标签完全消失在页面中时销毁
if(parseInt(span.style.left)<-1*span.offsetWidth){
clearInterval(timer);
document.body.removeChild(span)
}
},50)
// 这个50代表每50毫秒，走一次
}
script>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
html{
height: 100%;
}
body{
height: 100%;
}
style>
head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
body>
<script>
function Bullet(words){
this.span=document.createElement("span");
//这个利用随机数来实现字体在屏幕中字体大小的不同
if(Math.random()<0.2){
this.span.style.fontSize="50px";
}
//给span标签定位
this.span.style.position="absolute";
this.span.style.left=document.body.offsetWidth+"px";
//让弹幕从不同的高度出来
this.span.style.top=Math.floor(document.body.offsetHeight*Math.random())+"px";
this.span.innerHTML=words;
this.timer=null;
this.init();
this.move();
}
Bullet.prototype.init=function(){
document.body.appendChild(this.span)
}
Bullet.prototype.move=function(){
let that=this;
//定义span在每50毫秒走4像素的距离
//当弹幕完全消失在屏幕时被销毁和销毁定时器
this.timer=setInterval(function(){
that.span.style.left=parseInt(that.span.style.left)-4+"px";
if(parseInt(that.span.style.left)<-1*that.span.offsetWidth){
document.body.removeChild(that.span)
clearInterval(that.timer)
}
},50)
}
var btn=document.getElementById("btn");
btn.onclick=function(){
let words=document.getElementById("words").value;
let obj=new Bullet(words);
}
script>
html>