【Hacker News搬运】HTML属性与DOM属性

[hackernews]

Title: HTML Attributes vs. DOM Properties

HTML属性与DOM属性

Text:

hn link

Url: https://jakearchibald.com/2024/attributes-vs-properties/

文章标题：HTML attributes vs DOM properties

文章内容概述：

本文主要探讨了HTML属性和DOM属性之间的区别。作者指出，属性（attributes）和属性（properties）从根本上来说是不同的东西，可以有不同的值。例如，在HTML中，`<div foo="bar">`和`<script>const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // 'hello world'</script>`，尽管它们的名称相同，但值不同。

文章进一步解释了属性和属性的技术差异，例如：

1. 属性在HTML序列化中是可见的，而属性不是。
2. 属性值总是字符串，而属性可以是任何类型。
3. 属性名不区分大小写，而属性名区分大小写。
4. 属性有时会反映为属性，例如`<div id="foo"></div>`中的`id`属性会反映为`div.id`。
5. 属性用于配置，而属性可以包含状态。

此外，文章还讨论了不同前端框架如何处理属性和属性的差异，包括Preact、VueJS、React和lit-html。

最后，作者强调了解属性和属性的区别对于深入理解DOM和前端开发非常重要，尽管大多数情况下这些区别并不重要。

Post by: thunderbong

Comments: