今天尝试练习了一下JavaScript的相关技术。

一、简单的DOM

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。简单来说，可以理解成“元素操作”。

1、获取元素

在JavaScript中，我们可以通过以下6种方式来获取指定元素（下面包含练习中的代码图片）。

①getElementById()

②getElementsByTagName()

③getElementsByClassName()

④querySelector()和querySelectorAll()

⑤getElementsByName()

⑥document.title和document.body

2、创建元素

语法： var e1 = document.createElement("元素名"); //创建元素节点 var txt = document.createTextNode("文本内容");//创建文本节点 e1.appendChild(txt); //把文本节点插入元素节点中 e2.appendChild(e1); //把组装好的元素插入已存在的元素中

3、插入元素

（1）appendChild()：在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的末尾。

语法：A.appendChild(B);

说明：A表示父元素，B表示动态创建好的新元素。

实践：

（2）insertBefore()：在JavaScript中，我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。

语法：A.insertBefore(B,ref);

说明：A表示父元素，B表示动态创建好的新元素。

实践：

二、JavaScript事件

在JavaScript中，想要给元素添加一个事件，有以下2种方式。

1、事件处理器

实践：在上面的代码中，一开始的目的是想给按钮添加3次onclick事件，但JavaScript最终只会执行最后一次onclick。事件处理器是没办法为一个元素添加多个相同事件的。

如果想要为一个元素添加多个相同的事件，就需要用到另外一种添加事件的方式——事件监听器。

2、事件监听器

（1）绑定事件

所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件。

语法：obj.addEventListener(type , fn , false)

说明：①obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

②type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。

③fn是一个函数名，或者一个匿名函数。

④false表示事件冒泡阶段调用。

实践：

（2）解绑事件

在JavaScript中，我们可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作。

语法：obj.removeEventListener(type , fn , false);

说明：①obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

②type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里我们是不需要加上on前缀的。

③对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

实践：

小感悟：JavaScript的出现，使得用户可以与页面进行交互，让网页实现更多绚丽的效果。这次只练习了两个小部分，JavaScript中还有很多部分需要细细研究。

JavaScript中的DOM和事件基础的实践 | 青训营