3.1　DOM与事件对象

本节将介绍DOM与事件对象的使用方法。DOM可以用来动态地改变元素的位置，事件对象则提供了元素在触发了某个事件时的一些参数。本节内容是实现拖放的基础，读者应重点掌握。

3.1.1　DOM

DOM（Document Object Model，文档对象模型）是针对HTML和XML提供的一个API。DOM的主要目的是为了能以编程的方法操作HTML的内容（比如添加某些元素、修改元素的内容、删除某些元素）。我们先来看一段简单的HTML代码：

01  <html>
02       <header>
03           <title>DOM示例</title>
04       </header>
05       <body>
06           <div id="element">
07                <a href="#">超链接</a>
08            </div>
09            <p>一段文字</p>
10       </body>
11  </html>

当浏览器将HTML代码加载完毕后，DOM将HTML文档表达为树结构，如图3.1所示。

图3.1　DOM树结构

读者可以发现DOM其实只是HTML文档的不同表现形式而已，读者可以简单理解为DOM对象就是它所代表的HTML元素，它将HTML文档中的元素以树形结构解析成一个个的对象，并为其提供了一系列的操作方法，通过这些方法我们可以动态地改变HTML文档的结构，这个特征正是实现拖动效果的基础。

通过图3.1我们可以发现，这个DOM树中有body元素对象、div元素对象等，那么我们该如何选择这些对象呢？第一种方法是通过JavaScript的方法直接选择HTML元素的DOM对象，例如：

var element  = document.getElementById("element");

这段代码的含义是选择id为element元素的DOM对象，其代表的是HTML代码中的<div>标记。使用JavaScript操作DOM对象十分烦琐，因此有人开发出jQuery框架，jQuery通过选择器的方式选择指定元素，并将其转换成jQuery对象，例如：

var $element = $("#element");

提示

jQuery对象并非DOM对象，它们的转换关系如下：

01 $element = $(element);//DOM对象转换成jQuery对象
02 element = $element[0];//jQuery对象转换成DOM对象
03 element = $element.get(0);//jQuery对象转换成DOM对象

下面我们使用jQuery来动态改变HTML的结构，我们将图3.1中的p元素删除，并将其添加到div元素中，代码如下：

01       $(function(){
02           $p = $("p");//选择p标记
03           $p.remove();//删除p标记
04           $div = $("#element");//选择div标记
05           $div.append($p[0]);//在div标记中添加p标记，append方法接收的是一个DOM对
06  象，因此我们需要将p元素的jQuery对象转换成对应的DOM对象
07       });

提示

$(function(){//内容});函数的意思是当文档加载完毕后处理的程序，在DOM树结构生成完毕后触发。如果不使用该方法，我们可能无法选择指定的元素，因为此时元素还未全部加载完毕。

此时文档的DOM树结构发生改变，如图3.2所示。

图3.2　改变后的DOM树结构

3.1.2　事件对象

在触发事件的函数里面我们会接收到一个event对象，在本书中使用参数e表示。我们可以通过event的属性target来获取需要的一些参数，例如此事件作用到哪个元素身上了。如果想阻止浏览器的默认事件行为，那么可以通过方法preventDefault()来进行阻止。

事件对象的属性非常多，如果读者想要了解事件对象的详细使用方法，可以查阅相关资料或者使用2.1.2节中提供的writeObj方法打印指定事件对象的内容。下面将详细讲解事件对象中的data属性，该属性返回绑定事件时传入的附加数据，其本身也是一个对象。在拖放事件中该data对象的属性见表3.1。

表3.1　data对象主要属性

上一章目录下一章