应根据值是否动态变化来选择：读写初始html声明值（如data-id、colspan）用getattribute()，读写实时dom状态（如value、checked）用.property。
什么时候该用 getAttribute()，什么时候该用 .property
核心判断标准：看你要读/写的值是否随用户交互或脚本运行而动态变化。
HTML 属性（attribute）只存初始声明值，DOM 属性（property）反映当前真实状态。比如：<input value="Alice">，页面加载后用户把输入框改成 “Bob”，getAttribute('value') 仍返回 "Alice"，而 input.value 是 "Bob"。
- 读取初始配置、模板值、自定义属性（如
data-id、aria-label）→ 用getAttribute() - 读写表单控件实时状态（
checked、selected、disabled、value）→ 直接操作.checked、.value等 DOM 属性 - 修改 class 或 style → 优先用
element.className/element.classList和element.style.cssText，而不是setAttribute('class', ...)，后者在旧 IE 中行为不一致
checked、selected、disabled 这类布尔属性为什么不能用 setAttribute
因为它们在 HTML 中是“存在即真”的标记式属性（如 checked 不带值，或写成 checked=""），但对应的 DOM 属性是布尔类型：true / false。
执行 el.setAttribute('checked', 'true') 只是往 HTML 中加了个字符串属性，不会触发 checkbox 的勾选状态；而 el.checked = true 会立即更新 UI 并同步内部状态。
-
el.checked = true→ 勾选，且el.hasAttribute('checked')可能为false（取决于是否手动 setAttribute） -
el.removeAttribute('checked')→ 移除 HTML attribute，但el.checked仍可能是true（如果用户已勾选） - 判断是否“被选中”，永远用
el.checked，不是el.hasAttribute('checked')
哪些 HTML 属性没有对应 DOM 属性？怎么处理
像 colspan、rowspan、enctype、shape 这类纯 HTML 规范定义的属性，在标准 DOM 接口中没有直接映射的 property。浏览器不会自动同步它们到 JS 对象上。
这类属性只能靠 getAttribute() / setAttribute() 操作，且修改后可能触发浏览器重渲染（例如改 colspan 会影响表格布局），但不会改变任何 DOM property 的值。
-
el.getAttribute('colspan')→ 安全读取 -
el.setAttribute('colspan', '2')→ 安全写入 -
el.colspan→ 在多数现代浏览器中会返回数值，但这是非标准行为；IE 中可能返回undefined或字符串，不可靠 - ARIA 属性（如
aria-expanded）、SVG 属性（如fill）也属于这一类，必须走 attribute 路径
jQuery 的 attr() 和 prop() 混用容易出错
jQuery 1.6+ 明确拆分了这两个方法，但很多人仍习惯性全用 attr()，结果在表单状态上踩坑。
attr() 操作的是 HTML attribute，prop() 操作的是 DOM property —— 它们不是别名关系，而是语义完全不同的操作。
-
$el.attr('checked')→ 返回"checked"字符串或undefined，取决于 attribute 是否存在 -
$el.prop('checked')→ 返回true/false，反映当前勾选状态 - 对
value：用.val()（它内部调用prop）；对data-属性：用.data()（有缓存和类型转换） - 不要对
disabled用attr('disabled', true)，它只是加个空 attribute，而prop('disabled', true)才真正禁用元素
现代框架（React/Vue/Angular）默认绑定到 DOM property，所以模板里写 [disabled]="isDisabled" 实际操作的是 element.disabled，不是 attribute —— 这也是为什么手写原生 JS 时更要明确区分二者。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
