[译]HTML attribute与DOM property之间的区别？

wmui 发布于2019-08-01 16:32 / 1108人阅读

摘要：，还有三者都返回相同的。这篇文章我将解释和的区别。特性特性由定义，所有出现在标签内的描述节点都是特性。属性属性属于对象，实质就是中的对象。尤其是有些类型本该是布尔类型的特性。浏览器会自动将这些值转变成布尔值传给属性。

原文：http://joji.me/en-us/blog/htm...

当我们通过js处理DOM对象时非常容易将attribute（特性）和property（属性）混淆。document.getElementById("test").getAttribute("id")，$("#test").attr("id"), document.getElementById("test").id还有$("#test").prop("id")三者都返回相同的id：“test”。这篇文章我将解释attribute和property的区别。

Attribute（特性）

attribute特性由HTML定义，所有出现在HTML标签内的描述节点都是attribute特性。

document.getElementById("test").attributes;
// return: [custom-attr="hello", class="button",   id="test"]

attribute特性的类型总是字符串类型。拿上边的DIV为例，document.getElementById("test").getAttribute("custom-attr") 或者 $("#test").attr("custom-attr")总是返回字符串类型的"1"。

Property（属性）

property属性属于DOM对象，DOM实质就是javascript中的对象。我们可以跟在js中操作普通对象一样获取、设置DOM对象的属性，并且property属性可以是任意类型。

document.getElementById("test").foo = 1; // 设置属性: foo 为 number类型: 1
document.getElementById("test").foo; // 获取属性值, return number: 1
$("#test").prop("foo"); // 使用jquery获取属性值, return number: 1

$("#test").prop("foo", {
   age: 23,
   name: "John"
}); // 使用jquery设置一个名为foo的对象
document.getElementById("test").foo.age; // return number类型: 23
document.getElementById("test").foo.name; // return string类型: "John"

译者注：这里的property可以是任意类型指的是我们为DOM对象自定义添加的属性，对于DOM对象的原始属性，类似name属性，无论我们设置什么类型的值，最后返回的都是字符类型。

另外，我们获取HTML5定义的data属性时，获取的值也是字符串。

,ele.dataset.id // string 33

非自定义的attribute特性与property有1:1的映射关系，比如：id，class，title等。

document.getElementById("test").id; // return string: "test"
document.getElementById("test").className; // return string: "button"
document.getElementById("test").foo; // return undefined 因为foo是一个自定义的attr特性

注意：当我们通过property属性进行设置或获取class时，我们需要使用"className"，因为在js中class是关键字。

译者注：第二点的意思是说当我们在html中写非自定义的attribute特性时，DOM对象会自动映射对应的property

非自定义的property（attribute）改变的时候，其对应的attribute（property）在多数情况下也会改变。

    var div = document.getElementById("test");
   div.className = "red-input";
   div.getAttribute("class"); // return string: "red-input"
   div.setAttribute("class","green-input");
   div.className; // return string: "green-input"

当对应的property改变的时候，attribute特性value的值一直未默认值，并不会随之改变。

var input = document.getElementById("search");
input.value = "foo2";
input.getAttribute("value"); // return string: "foo"

译者注：这条特性意味着我们平时在写业务的时候多数情况下使用property是正确的。当用户input输入更改的时候，attribute-value值不会变化，即使js更改value，也不会使attribute变化。这也验证了第三点的。

最佳实践

在javascript中我们推荐使用property属性因为这个属性相对attribute更快，更简便。尤其是有些类型本该是布尔类型的attribute特性。比如："checked", "disabled", "selected"。浏览器会自动将这些值转变成布尔值传给property属性。

好实践

// get id
document.getElementById("test").id;
// set class
document.getElementById("test").className = "red";
// get and set radio control status
document.getElementById("test").checked; // boolean 
document.getElementById("test").checked = true;
$("#test").prop("checked"); // boolean
$("#test").prop("checked", true);

坏实践

// get id
document.getElementById("test").getAttribute("id");
// set class
document.getElementById("test").setAttribute("class", "red");
document.getElementById("test").getAttribute("checked"); //  返回字符串类型 "checked"

本文来自二口南洋，有什么需要讨论的欢迎找我。

服务器托管混合云 css与html的区别 html与css的区别 jsp与html的区别大数据与共享经济之间的联系

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50583.html

jQuery 的 attr 与 prop 的区别

摘要：先提出问题对于这类值是的属性，用的或方法进行读取或设置值是有区别的。因此，如果你想知道文本框的当前值，则读取。的值并不会随着的状态而作出相应改变，而会。为对象设置值的安全做法避免内存泄漏是使用。参考翻译地址的与的区别先提出问题：对于 checked 这类值是 true/false 的属性，用 jQuery 的 attr 或 prop 方法进行读取或设置值是有区别的。在看 jQue...

kk_miles 2019-08-19 17:47 评论0 收藏0
前端中的 Attribute & Property

摘要：在使用上面，已经表明态度模板绑定是通过和事件来工作的，而不是。更改的值，相当于再次初始化。原生操作读写删除采用的是更改的方式，基本上对应中提供的三个操作的方法。为了在翻译上显示出区别，Attribute一般被翻译为特性，Property被译为属性。在使用上面，Angular已经表明态度 Template binding works with properties and even...

fou7 2019-08-01 18:22 评论0 收藏0
前端中的 Attribute & Property

摘要：在使用上面，已经表明态度模板绑定是通过和事件来工作的，而不是。更改的值，相当于再次初始化。原生操作读写删除采用的是更改的方式，基本上对应中提供的三个操作的方法。为了在翻译上显示出区别，Attribute一般被翻译为特性，Property被译为属性。在使用上面，Angular已经表明态度 Template binding works with properties and even...

wall2flower 2019-08-21 18:41 评论0 收藏0
前端杂谈: Attribute VS Property

摘要：前端杂谈第一个问题什么是什么是是我们在代码中经常看到的键值对例如上面代码中的节点有三个是对应的节点的对象属性例如第二个问题从上面的例子来看似乎和是相同的那么他们有什么区别呢让我们来看另一段代码在页面加载后我们在这个中输入注意这段代码前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ? attribute 是...

elina 2019-08-02 11:59 评论0 收藏0
jQuery中attr()和prop()的区别

摘要：需求很简单的，一个非常简单的复选框的使用。与的区别复选框设置设置自定义自定义设置类型设置类型支持类型在这里温馨提示提示一下，当我们设置这个属性时，再用获取的时候，控制提示。问题引入昨天接到了一个活，里面有一个小需求，在写的过程中遇到了一个小问题。虽然这个问题并不是很复杂的东西，但却是一个比较细节的问题。相信不少新手前端会遇到。下面我先描述一下我这个遇到的这个需求。 showImg(...

mo0n1andin 2019-08-20 15:38 评论0 收藏0