JavaScript学习笔记——DOM：HTML中的元素与JavaScript中的对象，有何区别？

问题引入

设置某HTML元素Elem的特性如id时，有两种方法：

(1)设置元素特性Elem.setAttribute("id","1")

(2)设置对象属性Elem.id="1"

这两种方法有什么区别？

先说结论：统一用setAttribute()更好
(详解见后文)

---

区别的关键在于：是对象的属性还是HTML元素的特性

• 对于一些HTML元素（如id和src等），在JavaScript中被转换为对象后，对象属性的值就是相应HTML元素的特性可使用Elem.src=...，也可使用Elem.setAttribute,而且这两种方法的效果相同
• 然而，并非所有HTML元素特性都有对应的对象属性，因此对于这类特性，必须使用setAttribute和getAttribute来设置和获取。
• 因此，对于两种情况，统一使用setAttribute()更好一些

HTML中的元素与JavaScript中的对象

我们知道，组成网页有“三件套”——HTML、CSS和JavaScript

要实现动态变化的网页，仅有HTML和CSS指定网页结构和样式是不行的
必须有JavaScript与网页的交互，这是通过DOM(DOM学习笔记)实现的

这里需要区分两个概念：(JavaScript中)对象的属性和(HTML中)元素的特性

• 在HTML中，有一系列元素，如<div>、<img>、<input>，它有一些可设置的特性如id、innerHTML等

• DOM将这些HTML元素转换为一系列对象存储在DOM中

• 在JavaScript中，使用getElementById从DOM获取“元素”时，本质上获得的并不是所谓"元素"，而是元素对象（重点在于“对象”二字，其本质是JavaScript中的对象，包含一些方法和属性）

JavaScript对象属性与HTML元素特性的区别

• 对于一些HTML元素（如id和src等），在JavaScript中被转换为对象后，对象属性的值就是相应HTML元素的特性，可使用Elem.src=...，也可使用Elem.setAttribute,而且这两种方法的效果相同
• 然而，并非所有HTML元素特性都有对应的对象属性，因此对于这类特性，必须使用setAttribute()和getAttribute()来设置和获取。

综合考虑后，对于这两种情况，统一使用setAttribute()更好一些

例如
所有的元素对象都包含属性id，对象属性的值就是相应HTML元素的特性id(如果在HTML中设置了)
表示图像的<img>元素，其元素对象还有一个src属性，其值为相应<img>元素的scr特性指定的图像文件。


因此，就src和id而言，对象属性=元素特性，要设置和获取特性，可使用Elem.src=...，也可使用Elem.setAttribute,而且这两种方法的效果相同
但是，并非所有HTML元素特性都有对应的对象属性，因此对于这类特性，必须使用setAttribute和getAttribute来设置和获取。