JS中DOM元素的attribute与property属性示例详解

关于“JS中DOM元素的attribute与property属性示例详解”，我们可以从以下几个方面进行说明：

一、什么是DOM元素的attribute和property？

DOM元素可以看做是一个JS对象，它有很多属性和方法，其中包括两个比较容易混淆的属性，分别是attribute和property。

attribute是DOM元素具有的属性，就是标签上的属性，可以通过elem.getAttribute('attrName')来获取属性的值，也可以通过elem.setAttribute('attrName', 'value')来设置属性的值。比如：

<div id="example" class="box"></div>

上面的div元素有两个attribute，分别是id和class。可以通过以下代码获取它们的值：

var exampleDiv = document.getElementById('example');
var idValue = exampleDiv.getAttribute('id');
var classValue = exampleDiv.getAttribute('class');

property是DOM元素在JS对象中的属性，它们可以直接通过JS对象的属性名获取。比如：

console.log(exampleDiv.id); // 'example'
console.log(exampleDiv.className); // 'box'

二、attribute和property之间的区别

虽然使用上很相似，但是attribute和property还是有一些区别的：

• attribute是DOM元素具有的标签属性，而property则是DOM元素在JS对象中的属性。
• attribute和property在命名上有些不同，比如class在DOM标签中是class，而在JS对象中是className。
• attribute和property的值有时候是相同的，但有些情况下是不同的。比如，input元素的value attribute是在页面加载时设置的默认值，而input元素的value property则是用户在输入框中输入的值。

三、示例说明1：修改input元素的value属性

<input type="text" id="myInput" value="hello world">

现在有一个input元素，我们要修改它的value属性，可以通过以下代码实现：

var inputElem = document.getElementById('myInput');
inputElem.value = 'hello DOM';

这里修改了input元素的value property，这个值会在输入框中显示出来，但是input元素的value attribute并没有改变。

四、示例说明2：修改checkbox元素的checked属性

<input type="checkbox" id="myCheckbox" checked>

现在有一个checkbox元素，我们要修改它的checked属性，可以通过以下代码实现：

var checkboxElem = document.getElementById('myCheckbox');
checkboxElem.checked = false;

这里修改了checkbox元素的checked property，由于checked属性的取值只有true和false，因此如果设置为false，则checkbox元素不会被选中，但是checkbox元素的checked attribute依然存在，并且值为true。

通过以上两个示例，相信你对DOM元素的attribute和property有了更深的理解。