DOM 元素的常见属性和方法

🏷️ 基础标识属性

属性名	描述
tagName	标签名，如 BUTTON、DIV 等（通常是大写）
id	元素的 id 属性
className	元素的类名（字符串）
classList	类名的 DOMTokenList 对象，支持增删查操作
name	元素的 name 属性（若有）
type	对于 <input> 或 <button> 类型的元素，会返回它的 type（如 "submit"、"button"）

---

🔧 属性/内容相关

属性名	描述
innerText	元素可视的文本内容
textContent	元素的全部文本内容（包括隐藏的）
innerHTML	元素内部的 HTML 字符串
outerHTML	元素自身及其内部的 HTML 字符串
value	多用于表单控件，如 <input> 或 <button> 的值
dataset	所有 data-* 自定义属性，返回一个对象，如 ev.target.dataset.foo

---

🧭 结构相关

属性名	描述
parentElement	父元素
children	所有子元素（HTMLCollection）
firstElementChild / lastElementChild	第一个/最后一个子元素
nextElementSibling / previousElementSibling	相邻的兄弟元素

---

🖱️ 事件相关

属性名	描述
onclick	点击事件处理函数（如已设置）
addEventListener / removeEventListener	添加/移除事件监听器
disabled	是否禁用（对 <button> 很常见）

---

🖼️ 样式相关

属性名	描述
style	内联样式对象（CSSStyleDeclaration）
offsetTop / offsetLeft	元素相对父元素的位置
offsetWidth / offsetHeight	元素尺寸
getBoundingClientRect()	获取元素的绝对位置和尺寸（返回一个 DOMRect）
computedStyle = getComputedStyle(ev.target)	获取最终计算样式

---

示例：

假设你在事件中打印 ev.target：

console.log(ev.target.tagName);     // "BUTTON"
console.log(ev.target.classList);   // DOMTokenList [...]
console.log(ev.target.dataset.id);  // "123" 如果 <button data-id="123">
console.log(ev.target.innerText);   // "删除"
console.log(ev.target.value);       // 对于 <button value="foo">有值

---

如果你有具体的使用场景，我也可以帮你提炼最实用的属性集合。是否要我帮你整理一下针对按钮点击的最佳实践模板？