怎么利用HTML的getAttribute和setAttribute操作元素的HTML属性-html教程-PHP中文网

应根据操作目标选择：读写html源码属性（如data-、aria-）用getattribute/setattribute，读写dom实时状态（如value、checked）直接访问属性。

怎么利用html的getattribute和setattribute操作元素的html属性

直接访问 input.value 拿到的是当前输入值，但 getAttribute('value') 只返回最初写在 HTML 标签里的值（比如 <input value="default">），哪怕用户已改过内容，它也不会变。

对 id、class、src、href 这类反射型属性有效，但 class 返回字符串，不是类名数组
布尔属性如 disabled、checked：有该属性就返回字符串（如 "disabled"），没写就返回 null，**不是 true/false**
自定义属性（data-*）能读，但推荐用 dataset 更安全——比如 el.dataset.userId 自动转驼峰，而 getAttribute('data-user-id') 得手动处理连字符

setAttribute('style', 'color:red') 会把整个 style 属性替换成这个字符串，清掉之前所有内联样式；想局部改样式，应该用 element.style.color = 'red'。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

设布尔属性只需传任意非空字符串：el.setAttribute('disabled', '') 或 el.setAttribute('disabled', 'disabled') 都生效；要移除，必须用 removeAttribute('disabled')，不能设成 '' 或 false
设 class 会完全替换，不合并；需要增删类名时，优先用 classList.add()/classList.remove()
设 value 对 <input> 只影响初始值，不影响当前用户输入；运行时改值请直接赋 input.value = 'xxx'

核心判断标准：你想操作的是「HTML 源码里写的那个属性」，还是「当前 DOM 节点的实时状态」。

读写 data- 属性、aria- 属性、role 等语义化或自定义属性 → 用 getAttribute/setAttribute 或 dataset
读写 value、checked、selected、innerHTML 等反映当前状态的属性 → 直接点属性，比如 input.value、checkbox.checked
改 id、src、href 这类既在 HTML 中声明、又影响行为的属性 → 两者都行，但 setAttribute 更明确表示“我要改 HTML 属性”，适合初始化或配置场景

IE8+ 支持 getAttribute/setAttribute，但 IE8 不支持 dataset；现代浏览器中它们性能差异极小，无需刻意优化。

getAttribute('class') 在 IE8–10 返回 className 属性值（即 class 字符串），但标准行为是返回 class 属性值，行为一致；不过仍建议用 className 或 classList 替代
反复调用 setAttribute 修改同一属性（比如循环设 data-index）不会触发重排，但频繁操作 style 属性会，这点比直接赋 style.cssText 更轻量
注意：getAttribute 对不存在的属性返回 null，不是 undefined；做条件判断时别漏掉这层