在 HTML 里,attribute 和 property 有什么区别?
在 HTML 中,attribute
和 property
之间的区别是一个常见但容易混淆的概念。它们都与 HTML 元素有关,但它们在功能、用途和行为上有所不同。以下是它们之间的主要区别:
定义和来源:
Attribute: 它们是在 HTML 标记中定义的,通常用于提供配置或设置信息。例如:
<input type="text" value="Hello">
中的type
和value
就是属性。Property: 一旦浏览器解析 HTML 并创建 DOM(文档对象模型),HTML 元素就会变成对象。这些对象有属性,这些属性称为属性。在 JavaScript 中,你可以通过 DOM API 访问这些属性。
类型:
Attribute: 它们总是字符串。即使你在 HTML 中为它们赋予了非字符串的值,它们也会被转换为字符串。
Property: 它们可以是任何类型,例如字符串、数字、布尔值、对象、数组等。
可变性:
Attribute: 初始值来自 HTML 代码,但在 JavaScript 中可以修改它们。
Property: 它们的值可以在 JavaScript 中随时更改,而不会影响到 HTML 初始化代码中的原始属性值。
同步性:
对于某些 HTML 属性和 DOM 属性,它们是同步的,这意味着当你修改其中一个时,另一个也会被修改。例如,
id
属性和id
属性是同步的。但是,不是所有的属性(Attribute)和属性(Property)都是这样。例如,
input
元素的value
属性(Attribute)和value
属性(Property)在用户与输入交互后可能会不同步。存在性:
有些 HTML 属性没有对应的 DOM 属性,反之亦然。
访问:
Attribute: 可以使用
getAttribute()
和setAttribute()
方法在 JavaScript 中访问和修改它们。Property: 可以直接在 JavaScript 中通过点表示法或方括号表示法访问和修改它们,例如
element.id
或element["id"]
。
示例:
考虑以下 HTML 代码:
在 JavaScript 中:
在上面的示例中,我们可以看到 value
属性(Attribute)和 value
属性(Property)的行为是不同的。
总之,当你在 JavaScript 中与 HTML 元素交互时,通常更推荐使用 Property,因为它们提供了更丰富、更动态的交互方式。但在某些情况下,特别是当你需要获取 HTML 源代码中的原始值时,使用 Attribute 可能更有意义。
版权声明: 本文为 InfoQ 作者【Lee Chen】的原创文章。
原文链接:【http://xie.infoq.cn/article/575b1c4390bd2d1904dd2d40c】。文章转载请联系作者。
评论