DOM（Document Object Model, 文档对象模型）为文档提供了一种结构化的表示方法，通过该方法可以改变文档的内容和展示形式。在实际运用中，DOM更像是桥梁，通过它可以实现跨平台、跨语言的标准访问。

与DOM密不可分的是javascript脚本技术，DOM在客户端的技术也是基于该技术，通过该技术我们可以很方便的访问、检索、操作文档中的任何一个元素。因此，学号javascript脚本技术，是掌握DOM对象的一个重要条件。

　　Document即文档，当我们创建一个页面并加载到浏览器时，DOM模型根据该页面的内容创建一个文档文件。

　　Object及对象，是值具有独立特性的一组数据集合。例如，我们把新建的页面额外难当称之为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称之为对象方法。

Model即模型，在页面文档中，通过树状模型展示页面的元素和内容，其展示的方式则是通过节点（node）来实现的。

元素属性的操作

在jquery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操作，而removeAttr()方法可以轻松删除某已制定的属性。

1.获取元素的属性

　　获取元素的属性的语法如下：

attr(name)

其中，参数name表示属性的名称。

2.设置元素的属性

　　attr()方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：

attr(key,value)

其中，参数key表示属性的名称，value表示属性的值。

　　如果要设置多个属性，也可以通过attr()方法实现，其语法格式如下所示：

attr({key0:value0,key1:value1})

　　attr()方法还可以绑定一个function()函数，通过该函数返回的值作为元素的的属性值，其语法格式如下所示：

attr(key,fuction(index))

其中，参数index作为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

3.删除元素属性

　　jquery中通过attr()方法设置元素的属性后，使用removeAttr()方法可以将元素的属性删除，其使用的语法格式为：

removeAttr(name)

其中，参数name为元素属性的名称。

获取和设置元素

1.获取和设置元素内容

　　在jquery中，操作元素内容的方法包括html()和text()。前者与javascript中innerHTML属性类似，即获取或设置元素的内容；后者类似于javascript中的innerText属性，即获取或设置元素的文本内容。二者的格式与功能呢个区别如表所示：

html()方法仅支持XHTML的文档，不能用XML文档，而text()即支持HTML文档，也支持XML文档。

2.获取和设置元素的值

　　在jquery中，要获取元素的值ton通过val()方法实现，其语法格式如下所示：

val(val)

其中，如果不带参数val是获得元素的值；反之，是是将参数val的值赋给某元素，即设置元素的值。此方法常用语表烦中获取或设置对象的值。

　　另外，通过val()方法还可以获取select表集中的多个选项值，其语法格式如下所示：

val().join(",")

　　在val(val)方法中，如果有参数，其参数还可以是数组的形式，即val(array)，其作用是设置元素被选中。因此

$(":radio"),val(["radio2","radio3"])

代码的意思为：Value值为radio2和radio3的单选框被选中。

元素样式操作

在页面中，元素样式操作包含：直接设置样式、增加css类别、类别切换、删除类别。

1.直接设置元素样式

　　在jquery中，可以通过css()方法为某个制定的元素设置样式值，其语法格式如下所示：

css(vame,value)

其中name为样式名称，value为样式的值。

2.增加元素css类别

　　通过addClass(class)方法增加元素类别的名称，其语法格式如下：

addClass(class)

　　其中，参数class为类别的名称，也可以增加多个类别的名称，只需要将空格将其隔开即可，其语法格式为

addClass(class0 class1...)

　　注：使用addClass()方法近视追加样式类别，即它还保存原有的类别。

3.切换元素类别

　　通过toggleClass()方法切换不同元素类别，其语法格式如下：

toggleClass(class)

其中，class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该元素类别，否则增加一个该名称的CSS类别。

4.删除css元素类别

　　与增加类别的addClass()方法相对应，removeClass()方法则用于删除类别，其语法格式如下：

removeClass([class])

其中class为类别名称，该名称是可选项。当选该名称是，删除名称是class的类别，有多个类别时用空格隔开。如果不选，名称，则删除元素中的所有类别。

页面元素操作

如果要在页面中增加某个元素，只需要找到元素的上级节点，通过$(html)完成元素的创建后，增加到该节点中。

1.创建节点元素

　　函数$()用于动态创建页面元素，其语法格式如下：

$(html)

其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

var $div = $("<div title=‘jquery理念‘>Write Less Do More</div>");
$("body").append($div);

执行上述代码之后，将在页面文档body中创建一个div标记，其内容为"Write Less Do More"，属性title的值为"jquery理念"。

　　注：函数$(html)只是完成DOM元素的创建，加入到页面还需要同故宫元素及诶但的插入或追加操作；同时，在创建DOM元素是，要注意字符标记是否完全闭合，否则达不到预期的效果。

2.内部插入节点

　　在页面中动态创建元素需要执行节点的插入或追加操作。而在jquery中，有多种方法可以实现该功能，append()方法近视其中之一。按照插入元素的顺序来分，可以分为内部和外部两种方法。下面将分别对这些方法进行详细介绍。

　　外部插入的方法如表所示：

2.外部插入节点　

　　内部插入的方法如表所示：

4.复制元素节点

　　在页面中，有事需要将某个元素节点复制到另外一个节点，如购物网站中购物和的设计。在传统javascript中，需要编写较为复杂的代码，而在jquery中，额可以通过方法clone()轻松实现，该方法的语法格式为：

clone()

其功能为复制匹配的DOM元素并且选中复制成功的元素。该方法近视复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将钙元素的全部行为也进行复制，可以通过方法clone(true)实现，其格式为：

clone()

其中参数设置为true，就可以复制元素的所有事件处理

5.替换元素节点

　　在jquery中，如果要替换元素中的节点，可以使用replaceWith()和replaceAll()这两种方法，其语法格式分别如下：

replaceWith(content)

　　该方法的功能是将所有选择的元素替换成制定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。

replaceAll(content)

　　该方法的功能是将所有选择的元素替换成制定selector的元素，其中参数selector为需要被替换的元素。

注：replaceWith()和replaceAll()方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。一旦完成替换，被替换元素中的全部事件都将消失。

 6.包裹元素节点

　　在jquery中，不仅可以通过方法替换元素节点，还可以根据需求包裹某个制定的节点，对节点的包裹也是DOM对象中很重要的一项，其与包裹节点相关的全部方法如表所示：

　　注:在上述表格中，wrap(html)和wrapInner(html)方法比较常用，前者包括外部元素，后者包含元素内部的文本字符。

 7.遍历元素

　　在DOM元素操作中，有事需要对同意标记的全部元素进行同一操作。在传统的javascript中，先获取元素的总长度，然后以for循环语句递减总长度，访问其中的某个元素，代码相对复杂；而在jquery中，可以直接使用each()方法实现元素的遍历。其语法格式如下：

each(callback)

　　其中，参数callback是一个function函数，该函数还可以接受一个形参index，次形参为遍历元素的需要（从0开始）；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取。

8.删除页面元素

　　在DOM操作页面时，删除多余或指定的页面元素是非常必要的，jquery提供了两种删除元素的方法，即remove()和empty()。严格来说，empty()方法并非真正意义上的删除，使用该方法，紧紧可以清空全部的及诶但或节点所包含的所有后代元素，并非删除及诶但和元素。

　　remove()方法的语法格式如下：

remove([expr])

　　其中expr为可选子昂，如果接受参数，则该参数为筛选元素的jquery表达式，通过该表达式获取制定的元素，并进行删除。

　　empty()方法的语法格式如下:

empty()

其功能为清空所选呢的页面元素或所有的后代元素。

三、jquery操作DOM