十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

╰半橙微兮° 2022-10-03 00:32 297阅读 0赞

在jQuery官方文档中，分别是这样对应的。属性：Attributes；CSS：CSS。

**区分DOM属性和HTML元素属性**

HTML元素的属性大家应该都知道，比如<img>元素的src，id等。

最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素。

javascript中获取到的都是DOM元素，而不是HTML元素。

HTML元素属性和DOM属性的名称和值大部分都相同，所以导致很多人都错误的认为两者是相同的。

区分HTML元素属性和DOM属性是一件很考验经验和记忆力的事情，那是曾经。现在jQuery的属性操作函数attr()就可以忘记这些差异。

**使用javascript操作DOM属性**

使用javascript操作DOM属性就是操作javascript对象的属性。javascript对象的属性是不需要声明的。有多种方式可以访问属性，如下：

myImg.src = "xxxxxx" //使用“.”运算符

myImg\["src"\] = "xxxxxx" // 使用属性访问器

var propName = "src";

myImg\[propName\] = "xxxxxx" //属性访问器支持变量

因为提供了属性访问器，所以可以通过下面的方式遍历一个DOM对象的所有属性：

var result = "";

for (var p in myImg)

\{

result += "属性名：" + p + "，属性值：" + myImg\[p\] + "\\n";

\}

注意，事件或者函数也是对象的一个属性。如果一个对象是DOM对象，就默认情况下拥有很多的属性。

**使用javascript操作HTML元素属性**

使用javascript中的getAttribute和setAttribute，可以操作HTML元素属性。比如：

alert(myImg.getAttribute("class"));

myImg.setAttribute("class","myclass2");

通过改变HTML属性class，会改变相应的DOM元素的className属性。但不是所有的HTML元素都有对应的DOM属性。比如自定义的HTML元素属性就无法转换成DOM属性。再如元素属性"className"就比较特别，因为className是和HTML的class对应的。

在FireBug和IE Developer Tool中的HTML内容窗口都有了变化。

转载于:https://www.cnblogs.com/tomkillua/archive/2012/08/15/2639420.html

发表评论取消回复

表情：

评论列表（有 0 条评论，297人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 元素与属性

HTML 元素 -------------------- HTML 文档由 HTML 元素定义。 -------------------- HTML 元素 <

短命女/ 2023年10月13日 08:14/ 0 赞/ 38 阅读

相关操作元素之修改元素属性

操作元素之修改元素属性 <!DOCTYPE html> <html lang="en"> <head> <meta char

以你之姓@/ 2023年10月03日 14:27/ 0 赞/ 44 阅读

相关 jQuery之属性操作、元素操作和元素尺寸位置操作

jQuery之属性操作、元素操作和元素尺寸位置操作 jQuery之属性操作、元素操作和元素尺寸位置操作 1 jQuery 属性操作

妖狐艹你老母/ 2023年02月14日 10:22/ 0 赞/ 18 阅读

相关十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

在jQuery官方文档中，分别是这样对应的。属性：Attributes；CSS：CSS。区分DOM属性和HTML元素属性 HTML元素的属性大家应该都知道，比如<img>

╰半橙微兮°/ 2022年10月03日 00:32/ 0 赞/ 298 阅读

相关 20、DOm--操纵元素属性

1、操纵元素属性 .元素属性操作 . 第一种: oDiv.style.display="bolck"; . 第二种: oDiv.style\["diaplay"\

你的名字/ 2022年08月23日 00:46/ 0 赞/ 224 阅读

相关 jQuery操作DOM元素

HTML DOM常见操作: 　　查找节点,插入节点,删除节点,复制节点,替换节点,包裹节点. 查找节点　　关于节点的查找,是利用选择器完成的. 插入

妖狐艹你老母/ 2022年08月05日 16:20/ 0 赞/ 321 阅读

相关 html —— 查看元素属性与 js 全局属性

算是一个意外的收获，所以记录下。查看元素的全部属性与事件：使用 console.log() 打印元素，查看完整属性与事件。查看js 全局属性与事

一时失言乱红尘/ 2022年06月07日 06:18/ 0 赞/ 306 阅读

相关 JQuery改变HTML元素属性值

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 <a hre

痛定思痛。/ 2022年05月25日 13:05/ 0 赞/ 446 阅读

相关 JQuery效果与DOM元素操作

> 作者：西岭老湿 -------------------- Jquery效果基本效果问题及效果： 05-6-2toggle 案例中的折叠效果并不理想，

Bertha 。/ 2022年05月18日 02:51/ 0 赞/ 305 阅读

相关 jQuery操作DOM元素

作为一个后端程序员，也是要和前端页面打交道的。最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求。实现上述两个功能当然可以使用原生js来完成，但在实际开

男娘i/ 2022年04月24日 23:52/ 0 赞/ 352 阅读