document.getElementById(‘xxx‘) 获取到的 DOM 元素对象，有哪些常用属性？

📌 一、通过 getElementById 获取到的是什么？

var element = document.getElementById('myButton');

👉 element 是一个 DOM 元素对象（如 <button>、<div>、<input> 等）

这个对象有很多属性（properties），我们可以读取或修改它们来控制元素的行为和外观。

---

🧩 二、常用 DOM 元素属性详解（按类别）

1️⃣ 通用属性（所有元素都有）

属性	类型	说明	示例
.id	string	元素的 id 属性	element.id = "newId"
.className	string	元素的 class 属性（注意不是 class）	element.className += " active"
.classList	DOMTokenList	操作类名的现代方式	element.classList.add('hidden')
.tagName	string	元素标签名（大写）	<div> → "DIV"
.innerHTML	string	元素内部的 HTML 内容	div.innerHTML = "<p>新内容</p>"
.textContent	string	元素内部的纯文本内容（安全）	div.textContent = "Hello"
.style	CSSStyleDeclaration	内联样式对象	element.style.color = "red"
.attributes	NamedNodeMap	所有属性集合	element.attributes['data-value']

---

2️⃣ 表单元素特有属性（<input>, <button>, <select> 等）

属性	类型	说明	示例
.value	string	输入框的值	input.value = "张三"
.checked	boolean	复选框/单选框是否被选中	checkbox.checked = true
.disabled	boolean	是否禁用	button.disabled = true
.readOnly	boolean	是否只读	input.readOnly = true
.selectedIndex	number	<select> 选中的选项索引	select.selectedIndex = 1
.options	HTMLOptionsCollection	<select> 的选项集合	select.options[0].value

---

3️⃣ 链接与图片（<a>, <img>）

属性	类型	说明	示例
.href	string	链接地址	link.href = "/home"
.src	string	图片源地址	img.src = "logo.png"
.alt	string	图片替代文本	img.alt = "公司logo"

---

4️⃣ 自定义属性（data-*）

属性	说明	示例
.dataset	存放所有 data-* 属性	<div data-user-id="123"> → element.dataset.userId

---

5️⃣ 位置与尺寸（布局相关）

属性	说明	示例
.offsetWidth / .offsetHeight	元素的宽高（含边框）	div.offsetWidth
.clientWidth / .clientHeight	内容区宽高（不含边框）	div.clientWidth
.offsetTop / .offsetLeft	相对于父元素的位置	div.offsetTop

---

🎯 三、实际应用示例

假设 HTML：

<input type="text" id="username" class="form-input" value="张三" disabled>
<button id="saveBtn">保存</button>
<div id="message"></div>

var input = document.getElementById('username');
var button = document.getElementById('saveBtn');
var message = document.getElementById('message');

// 1. 读取属性
console.log(input.value);        // "张三"
console.log(input.disabled);     // true

// 2. 修改属性
input.disabled = false;          // 启用输入框
input.value = "李四";             // 修改值
input.className += " edited";    // 添加类名

// 3. 控制 UI
button.disabled = !input.value;  // 如果输入为空，禁用按钮
message.textContent = "欢迎 " + input.value;

// 4. 操作样式
button.style.backgroundColor = "green";
button.style.padding = "10px";

---

⚠️ 四、常见误区

误区	正确做法
element.class	❌ 应该用 element.className 或 element.classList
element.getAttribute('value') vs .value	❌ .value 是当前值，getAttribute('value') 是初始值
element.innerHTML = "<script>alert(1)</script>"	❌ 有 XSS 风险，应使用 textContent
document.getElementById(...).value 链式调用时未检查是否存在	✅ 先判断 if (element)

---

🚀 一句话终极总结

document.getElementById('id') 返回的是一个 DOM 元素对象，
它像一个“遥控器”，通过它的属性，你可以：

• 读取/修改内容（.textContent）
• 控制状态（.checked, .disabled）
• 改变样式（.style）
• 操作类名（.classList）
• 获取尺寸（.offsetWidth）

它不是 getElementById 有属性，而是它返回的“元素”有属性。