DOM 对象属性与相应的 html 属性有什么区别

DOM对象属性与相应的HTML属性之间存在着几个关键性区别：类型差异、属性与属性值的同步差异、名称不一致以及获取方式不同。这些差异来源于HTML属性是HTML文档中标签属性的初次状态表现，而DOM对象属性则是浏览器解析这些HTML文档后，在内存中创建的JavaScript对象属性的表现。

以input元素的value为例，在HTML中value属性定义了输入字段的初始值；而在DOM中，value属性则实时反映了输入字段的当前值。换言之，HTML属性代表了元素在页面加载时的原始值，而DOM属性表示当前状态下的动态值。

一、类型差异

在HTML中，所有属性都以字符串的形式存在。而在DOM对象中，某些属性的值可能以不同的类型存在，如布尔值、对象或者函数等。

类型转换示例

考虑checked属性，HTML中这是一个布尔属性，它在HTML标签中出现即代表为真，在HTML中你可能看到这样的代码：

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

在DOM对象中，checked属性是一个实际的布尔类型，可以通过JavaScript动态查询或设置：

const checkbox = document.querySelector('input[type=checkbox]');
console.log(checkbox.checked); // 输出可能是true或false
checkbox.checked = true; // 直接设置复选框为选择状态

二、属性与属性值同步差异

HTML属性代表了文档加载时元素的初始状态。在用户与页面交互后，DOM对象属性会反映出最新的状态，但这并不总是会同步回HTML属性。

同步差异展开

创建元素后，若通过JavaScript改变了DOM对象的属性，这个变化并不会影响到相应的HTML属性。例如，改变input元素的value属性并不影响其HTML中的value属性。

const input = document.createElement('input');
input.value = '新值';
console.log(input.getAttribute('value')); // 输出为null或者初始值

三、名称不一致

一些HTML属性和DOM属性的名称并不一致，尤其是那些在HTML属性名中包含短横线（-）的属性。而在DOM对象中，通常遵循驼峰命名法。

名称转换示例

例如，HTML中的class属性对应于DOM的className属性：

<div class="my-div"></div>

const div = document.querySelector('.my-div');
console.log(div.className); // 输出 'my-div'
div.className += ' another-class'; // 添加新的类

四、获取方式不同

读取或设置HTML属性通常使用getAttribute()和setAttribute()方法。DOM对象属性则是作为对象上的直接属性进行读取和设置。

获取与设置方法

如果你需要获得或修改HTML属性的原始值，那么你应该使用getAttribute()和setAttribute()方法。而若是要处理当前状态或者响应用户交互，则直接访问DOM对象属性。

const element = document.querySelector('div');
// 获取HTML属性
const className = element.getAttribute('class');
// 设置HTML属性
element.setAttribute('id', 'newId');
// 直接操作DOM属性
element.id = 'newId';

在HTML与DOM的属性性质、同步行为、变量命名以及交互方式等方面，它们的区别需要根据实际开发的上下文和需求来作出相应的应用选择。特别是在复杂的JavaScript应用中，理解这些差异对于操作元素状态和属性至关重要。