什么是DOM？

DOM(Document Object Model) 文档对象模型，方便开发者对HTML结构元素进行修改和展示，DOM 不但内容庞大繁杂，而且我们开发的过程中需要思考更多的兼容性、扩展性。在jQuery 中，已经将最常用的DOM 操作方法进行了有效封装，并且不需要思考浏览器的兼容性。

D 表明的是页面文档Document、O 表明对象Object，即一组含有独立特性的数据集合、M表明模型Model，即页面上的元素节点和文本节点。
DOM 有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery 中并不需要深刻理解它。
树形结构用来表明DOM，就超级的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。

设置元素及内容

通过我们前面所学习的选择器选中DOM之后就可以使用jQuery提供给我们的方法对DOM进行操作。
DOM操作方法：

html()
获取和设置DOM结构中的HTML内容。
语法：

$(selector).html() // 获取DOM结构中的html内容
$(selector).html(htmlText) //设置DOM结构中的html内容
$(selector).html(function(index, value) {})  // 设置DOM结构中的HTML内容

在传入HTML文本的时候，jQuery会自动将html文本解析成标签的形式。
在使用该方法设置HTML文本的时候，会将原本的内容全部清空，如果需要对某个DOM进行内容的追加，应使用如下方法：

// 先将DOM中原本的内容获取到来，然后再追加要设置的内容
$( h2 ).html($( h2 ).html() +  要追加的内容 )

text()
获取和设置DOM结构中的文本内容。
语法：

$(selector).text() // 获取DOM中的文本内容
$(selector).text(text) // 设置DOM中的文本
$(selector).text(function(index, value) {}) // 设置DOM中的文本

html()和text()的区别在于text()方法不会解析DOM中的html标签，只会获得DOM中的纯文本，而html()方法不仅能够获取DOM中的文本，同时会解析出DOM中的标签，并且在设置的时候也可以解析传入的HTML标签。

val()
获取和设置DOM结构中的值，一般用于表单部分。
语法

$(selector).val() // 获取表单的值
$(selector).val(value) // 设置表单的值
$(selector).val([value1, value2, ...]) // 设置多个值

在使用val()设置表单的值的时候，要注意的是，如果你要设置的是多个值，传入参数应为一个数组。

操作元素的属性

jquery除了可以对元素的内容进行操作之外，还可以对元素的属性进行操作，包括设置属性值，获取属性值以及删除属性值。

attr()
获取和设置元素的属性值

$( a ).attr( href ) // 获取a元素的href属性
$( a ).attr( href ,  https://www.jianshu.com ) // 修改a元素的href属性值为简书
$( a ).attr({ href :  https://www.jianshu.com ,  target :  _blank }) // 修改a元素的href属性为简书，同时修改超链接打开方式为_blank

注意：可以使用attr()来创建ID属性和class属性，但是强烈提议不要这么去做。

removeAttr()
删除元素的属性值

$( a ).removeAttr( title ) // 移除a元素的title属性

该方法参数不可以为匿名函数，当该方法传入匿名函数时无效

操作元素的css样式

css()
该方法是获取和设置元素的css样式
语法：

$( div ).css( background-color ) // 获取div元素的背景颜色
$( div ).css([ width ,  height ]) // 同时获取div元素的宽度和高度，返回一个由css属性名和属性值组成的对象
$( div ).css( width ,  100px ) // 设置div的宽度为100px
// 如果需要设置多个css样式可用如下语法
$( div ).css({
   color :  red ,
   background-color :  black 
}) // 设置div的文字颜色为红色，背景颜色为黑色
// 如果需要设置多个css样式还可以使用如下语法
$( div ).css( width ,  100px ).css( height ,  100px ) // 设置元素宽度和高度为100px
/**
 * 当需要设置多个css样式时，提议使用第一种方法设置
 * 当然也可以使用第一种方法，第一种方法是对css方法传入一个css属性名和属性值的键值对对象
 * 第二种方法是当第一个css样式操作完成后返回了一个jquery对象，然后再设置第二个css样式
 * 第二种方法叫做jquery的链式操作
 */

addClass()
该方法是为元素添加class
语法：

$( div ).addClass( ad ) // 为div元素添加一个名为ad的class类名
$( div ).addClass( wh bgcolor-red ) // 为元素添加名为wh和bgcolor-red两个class

removeClass()
该方法是为元素移除class
语法：

$( div ).removeClass( wh ) // 为元素div移除一个名为wh的class
$( div ).removeClass( wh color-white ) // 为元素div移除名为wh和color-white两个class

toggleClass()
该方法是为元素切换样式
语法：

$( div ).toggleClass( color-red ) // 如果元素div存在color-red样式则移除，否则添加
$( div ).toggleClass( bgcolor-black color-red ) // 如果元素存在bgcolor-black和color-red样式则移除，否则添加

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END