简述attribute和property的区别 ?

在 JavaScript 中,当我们提到 HTML 元素的 attribute 和 property 时,这两个词并不完全相同,它们之间的区别主要体现在以下几个方面:

  1. Attribute 是 HTML 元素在源代码中定义的特性,它的值只能是字符串。例如,在 HTML 源码中,我们可能会这样定义一个 input 元素:
<input type="text" value="Hello">

在这个例子中,typevalue 就是这个 input 元素的 attribute。

  1. Property 则是 DOM 中的对象属性。当浏览器解析 HTML 代码,创建 DOM(文档对象模型)时,每一个 HTML 元素都会被转化为一个对象,这个对象的属性就是 property。Property 的值可以是任何 JavaScript 类型。

在上述例子中,当浏览器解析这个 input 元素,会创建一个对应的 Input 对象,这个对象有一个 value 的 property,最初它的值会被设置为 “Hello”。

这两者之间的一个主要区别是,attribute 的值在 HTML 代码加载后就不会再改变,而 property 的值会随着用户的交互、JavaScript 的操作而改变。例如,当用户在 input 框中输入新的内容时,value property 的值会改变,但 value attribute 的值仍然是 “Hello”。

let input = document.querySelector('input');
console.log(input.getAttribute('value')); // 输出 "Hello"
console.log(input.value); // 输出用户输入的内容

在这个例子中,getAttribute('value') 返回的是 attribute 的值,而 .value 返回的是 property 的值。

发表评论

后才能评论