写点什么

在 HTML 里,attribute 和 property 有什么区别?

作者:Lee Chen
  • 2023-09-16
    福建
  • 本文字数:999 字

    阅读完需:约 3 分钟

在 HTML 中,attributeproperty 之间的区别是一个常见但容易混淆的概念。它们都与 HTML 元素有关,但它们在功能、用途和行为上有所不同。以下是它们之间的主要区别:


  1. 定义和来源:

  2. Attribute: 它们是在 HTML 标记中定义的,通常用于提供配置或设置信息。例如:<input type="text" value="Hello"> 中的 typevalue 就是属性。

  3. Property: 一旦浏览器解析 HTML 并创建 DOM(文档对象模型),HTML 元素就会变成对象。这些对象有属性,这些属性称为属性。在 JavaScript 中,你可以通过 DOM API 访问这些属性。

  4. 类型:

  5. Attribute: 它们总是字符串。即使你在 HTML 中为它们赋予了非字符串的值,它们也会被转换为字符串。

  6. Property: 它们可以是任何类型,例如字符串、数字、布尔值、对象、数组等。

  7. 可变性:

  8. Attribute: 初始值来自 HTML 代码,但在 JavaScript 中可以修改它们。

  9. Property: 它们的值可以在 JavaScript 中随时更改,而不会影响到 HTML 初始化代码中的原始属性值。

  10. 同步性:

  11. 对于某些 HTML 属性和 DOM 属性,它们是同步的,这意味着当你修改其中一个时,另一个也会被修改。例如,id 属性和 id 属性是同步的。

  12. 但是,不是所有的属性(Attribute)和属性(Property)都是这样。例如,input 元素的 value 属性(Attribute)和 value 属性(Property)在用户与输入交互后可能会不同步。

  13. 存在性:

  14. 有些 HTML 属性没有对应的 DOM 属性,反之亦然。

  15. 访问:

  16. Attribute: 可以使用 getAttribute()setAttribute() 方法在 JavaScript 中访问和修改它们。

  17. Property: 可以直接在 JavaScript 中通过点表示法或方括号表示法访问和修改它们,例如 element.idelement["id"]


示例:


考虑以下 HTML 代码:


<input id="myInput" type="text" value="Hello">
复制代码


在 JavaScript 中:


let input = document.getElementById("myInput");
// Attributesconsole.log(input.getAttribute("value")); // 输出 "Hello"input.setAttribute("value", "Hi");
// Propertiesconsole.log(input.value); // 输出 "Hello",即使我们已经更改了value属性input.value = "Hi there";console.log(input.value); // 输出 "Hi there"
复制代码


在上面的示例中,我们可以看到 value 属性(Attribute)和 value 属性(Property)的行为是不同的。


总之,当你在 JavaScript 中与 HTML 元素交互时,通常更推荐使用 Property,因为它们提供了更丰富、更动态的交互方式。但在某些情况下,特别是当你需要获取 HTML 源代码中的原始值时,使用 Attribute 可能更有意义。

发布于: 刚刚阅读数: 4
用户头像

Lee Chen

关注

还未添加个人签名 2018-08-29 加入

还未添加个人简介

评论

发布
暂无评论
在HTML里,attribute和property有什么区别?_前端_Lee Chen_InfoQ写作社区