在 JavaScript 中，当我们提到 HTML 元素的 attribute 和 property 时，这两个词并不完全相同，它们之间的区别主要体现在以下几个方面：
- Attribute 是 HTML 元素在源代码中定义的特性，它的值只能是字符串。例如，在 HTML 源码中，我们可能会这样定义一个 input 元素：
<input type="text" value="Hello">
在这个例子中，type 和 value 就是这个 input 元素的 attribute。
- Property 则是 DOM 中的对象属性。当浏览器解析 HTML 代码，创建 DOM（文档对象模型）时，每一个 HTML 元素都会被转化为一个对象，这个对象的属性就是 property。Property 的值可以是任何 JavaScript 类型。
在上述例子中，当浏览器解析这个 input 元素，会创建一个对应的 Input 对象，这个对象有一个 value 的 property，最初它的值会被设置为 “Hello”。
这两者之间的一个主要区别是，attribute 的值在 HTML 代码加载后就不会再改变，而 property 的值会随着用户的交互、JavaScript 的操作而改变。
例如，当用户在 input 框中输入新的内容时，value property 的值会改变，但 value attribute 的值仍然是 “Hello”。
用户没有输入内容时，都是'Hello'
<body>
<input type="text" value="Hello">
<button id="btn">查看</button>
<script>
let input = document.querySelector('input');
console.log(input.getAttribute('value')); // 输出 "Hello"
console.log(input.value); // 输出 "Hello"
</script>
用户输入其他内容时，value property 的值会改变，但 value attribute 的值仍然是 “Hello”。
<body>
<input type="text" value="Hello">
<button id="btn">查看</button>
<script>
let input = document.querySelector('input');
console.log(input.getAttribute('value')); // 输出 "Hello"
console.log(input.value); // 输出 "Hello"
let btn = document.querySelector('button');
btn.addEventListener('click',()=>{
console.log(input.getAttribute('value')); //Hello
console.log(input.value); //简书
},false)
</script>
image.png
在这个例子中，getAttribute('value') 返回的是 attribute 的值，而 .value 返回的是 property 的值
网友评论