学习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变得简单了。

• 1
• 2
• 3
• 4
• 5

下面用两种方式实现弹幕的例子来更直观的展示DOM的操作：