DOM属性和HTML属性区别&&prop和attr区别

最新推荐文章于 2025-07-11 21:10:47 发布

苏霏雪

最新推荐文章于 2025-07-11 21:10:47 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21213785/article/details/82753123

本文探讨了JavaScript中DOM属性与HTML属性的区别，讲解如何使用JavaScript进行操作，并对比getAttribute与setProperty的不同应用场景。

ocument.getElementById('test').getAttribute('custom-attr') 或 $('#test').attr('custom-attr')一、DOM属性和HTML属性区别

1、HTML元素的属性，比如<img>元素的src，id等，最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素

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

3、HTML元素属性和DOM属性的名称和值大部分都相同

二、使用javascript操作DOM属性

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

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

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

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

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

var result = "";

for (var p in myImg){

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

}

2）事件或者函数也是对象的一个属性。如果一个对象是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对应的。

四、JavaScript中的attribute 和 property

Attribute由HTML来定义，并不存在于DOM中，即：只要是HTML标签内定义的都是attribute。

<div id="test" class="button" custom-attr="1"></div>

document.getElementById('test').attributes;
// 返回：[custom-attr="hello", class="button", id="test"]

document.getElementById('test').getAttribute('custom-attr') 

$('#test').attr('custom-attr')

Property属于DOM，DOM的本质就是JavaScript中的一个object。我们可以像操作普通object一样读取、设置property，property可以是任意类型

document.getElementById('test').foo = 1;
// 设置property：foo为number: 1
document.getElementById('test').foo;
// 读取property，返回number：1
$('#test').prop('foo');
// jQuery读取property，返回number：1

$('#test').prop('foo', {
    age: 23,
    name: 'John'
});
// jQuery设置property：foo为一个object
document.getElementById('test').foo.age;
// 返回number：23
document.getElementById('test').foo.name;
// 返回string："John"

非自定义attribute，如id、class、titile等，都会有对应的property映射。

<div id="test" class="button" foo="1"></div>

document.getElementById('test').id; 
// 返回string："test"
document.getElementById('test').className;
// 返回string："button"
document.getElementById('test').foo;
// 返回undefined，因为foo是自定义attribute

注：由于 class 为JavaScript的保留关键字，所以通过property操作class时应使用 className。

最佳实践

使用JavaScript操作property更为方便、快捷，并且property支持各种不同的类型，尤其是对于布尔类型的attribute的自动转换，如：checked、disabled、selected等。

<input id="test" class="blue" type="radio" />

推荐用法

// 获取id
document.getElementById('test').id;
// 更改class
document.getElementById('test').className = 'red';
// 获取、设置状态
document.getElementById('test').checked;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);

不推荐的用法

// 获取id
document.getElementById('test').getAttribute('id');
// 更改class
document.getElementById('test').setAttribute('class', 'red');

五、jQuery中使用attr(), prop(), val()

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.js"></script>

</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>

    $("#btn").click(function(){
        var attr=$("input").attr("value");
        var prop=$("input").prop("value");
        var val=$("input").val();
        console.log(attr);
        console.log(prop);
        console.log(val);
    })
</script>
</body>

　　　代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为：

123
123
123

　　　改变输入框的值，此时控制台输出：　

123
123thgf
123thgf

　　　如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：

undefined

　　attr()输出为undefined，而prop()和val()输出为“空”。
　　输入value值后：控制台输出为：

undefined
asdasd
asdasd

　　　attr()输出依然为undefined，而prop()和val()则输出实际值。
　　　
　　　可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。