应区分反射属性（如el.src）与getattribute()：前者获取动态解析值，后者返回原始html字符串；自定义data-*属性优先用dataset api；批量提取用queryselectorall配合数组方法；注意空属性和布尔属性的处理差异。
提取 dom 节点属性值，关键在于先准确获取目标元素，再用合适方式读取属性。直接访问属性名（如 el.src）和调用 getattribute() 并不等价，适用场景不同，容易出错。
区分属性访问方式：.src vs getAttribute("src")
HTML 元素的某些属性（如 src、href、value、checked）在 JS 中有对应的“反射属性”（reflected property），它们会自动同步初始 HTML 值或用户交互后的状态；而 getAttribute() 总是返回 HTML 源码中写死的原始字符串值。
-
用
el.src：适合获取解析后的真实 URL（比如相对路径已转为绝对路径）、当前输入框内容（el.value）、复选框是否勾选（el.checked）等动态值。 -
用
el.getAttribute("src")：适合读取原始 HTML 中写的值，比如调试时确认是否漏写属性、提取自定义 data-* 属性（data-id、data-type）、或需保留原始相对路径的场景。
安全提取自定义 data-* 属性
data-* 属性是存储组件私有数据的标准方式，推荐统一用 dataset API，它会自动把连字符命名转为驼峰式，比反复调用 getAttribute() 更简洁可靠。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- HTML 写：
<div data-user-id="1001" data-page-type="list"></div> - JS 读：
const el = document.querySelector('div'); console.log(el.dataset.userId); // "1001"; console.log(el.dataset.pageType); // "list" - 注意：
dataset只读取以data-开头的属性，且不支持带大写字母或数字开头的键名（如data-1id会被忽略）。
批量提取多个同类型节点的属性
当需要从一组元素（如所有 <script></script> 或 <img>）中提取相同属性时，避免手动 for 循环，优先使用现代方法提升可读性与健壮性。
- 用
querySelectorAll()获取 NodeList，再用Array.from()或扩展运算符转为数组： const scripts = document.querySelectorAll('script[src]'); const srcs = Array.from(scripts).map(el => el.src);- 若需原始 HTML 值（比如判断是否为空字符串或占位符），改用
getAttribute： const srcsRaw = [...scripts].map(el => el.getAttribute('src') || '');
处理不存在或空属性的情况
直接访问 el.src 不会报错，但可能返回空字符串或默认值（如 <img> 的 src 是空串）；而 getAttribute() 对不存在的属性返回 null，需主动判断。
- 稳妥写法：
const src = el.hasAttribute('src') ? el.getAttribute('src') : undefined; - 或用空值合并：
const src = el.getAttribute('src') ?? '';（ES2020+） - 对布尔属性（如
disabled、required），el.disabled返回true/false，而getAttribute('disabled')返回"disabled"字符串或null，不能直接比较真假值。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
