本文介绍了DOM和jQuery的节点及属性操作。在节点操作方面，涉及DOM的innerHTML、innerText属性，以及jQuery的html()、text()方法。属性操作涵盖DOM的value属性、jQuery的val()方法，还详细对比了DOM和jQuery属性节点操作的区别，包括多种操作方法及适用场景。
一.节点操作
1.DOM内容节点操作：
①innerHTML属性：设置或获取文本的内容（普通文本和标签）。
②innerText属性：设置或获取文本的内容（普通文本），存在兼容性问题。
2.jQuery内容节点属性：
①html([value])方法：设置或获取文本内容（普通文本和标签）。
②text([value])方法：设置或获取文本的内容（普通文本），不存在兼容性问题。
二.jQuery属性操作
1.DOM的value属性
value属性：设置或获取表单元素（表单域和表单按钮）的默认值。
2.jQuery的val([value])方法
val([value])方法设置或获取表单元素（表单域和表单按钮）的默认值。
注：DOM中常用属性值来操作，而jQuery常用方法来操作。
3.DOM属性节点操作和jQuery属性节点操作的区别
1）DOM属性节点操作
①把元素节点当做普通js对象来操作属性（点语法和中括号法）
缺点：无法操作class属性
②使用DOM提供的方法来操作
getAttribute("属性名")
setAttribute("属性名"，"属性值")
hasAttribute("属性名")
removeAttribute("属性名")
③使用className来操作
注：采用的是覆盖操作
2）jQuery属性节点操作
①采用attr()方法来操作属性
注：可以操作固有属性，也可以操作自定义属性。
a.获取属性
语法：attr("属性名")
b.设置单个属性
语法：attr("属性名"，"属性值")；
c.设置多个属性
语法：attr({
"属性名1"："属性值1"，
"属性名2"："属性值2"，
...
});
d.删除属性
语法：removeAttr("属性名")
②采用prop（）方法来操作属性
注：主要用于操作固有属性，操作checked、selected和disabled属性，一定要有
prop（）方法，不能用attr（）方法。
a.获取属性
语法：prop("属性名")
作用：当属性名为：checked、selected时，如果选中状态时则返回true，则否
返回false，当属性名为：disabled时，当禁用状态时返回true，否则返回false
b.设置属性
语法：prop（"属性名"，"属性值"）
作用：当属性名为：checked、selected时，设置的属性值如果为true，代表选
中，否则代表没选中；当属性值为disable时，设置的属性值如果为true，代表
禁用否则代表取消禁用。
注：如果属性值为boolean类型，那么可以不用双引号或单引号包裹。
c.删除属性
语法：removeProp("属性名")
注：使用DOM或jQuery提供的方法来操作表单属性，操作完毕之后在标签上面
不会有任何展示，使用DOM或jQuery所做的任何操作，都是在内存中做的操作。
③专门为class属性提供的操作方法
a.添加class属性
语法：addClass("class属性值")；
注：jQuery提供添加class的方法做的是追加操作。
b.判断是否存在某个class属性值（返回的是Boolean类型值）
语法：hasClass("class属性值")；
c.删除class属性
语法：removeClass(["class属性值"])；
注：如果没有参数，则代表删除所有的class属性值，
如果有参数，代表删除指定的class属性值
d.切换class属性
语法：toggleClass("class属性值");
注：如果标签中对应的“class属性值”存在，则删除
如果标签中对应的“class属性值”不存在，则添加
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
