最直接的方式是用 document.getElementById() 获取元素再取内容或属性：先通过 ID 定位元素，再用 .textContent、.innerHTML 或 .getAttribute() 读取内容或属性。
用 document.getElementById() 获取元素再取内容或属性
这是最直接的方式：先通过 ID 定位元素，再用 .textContent、.innerHTML 或 .getAttribute() 读取内容或属性。
-
.textContent只取纯文本（不含标签），且会合并空白符 -
.innerHTML返回包含 HTML 标签的字符串，修改它会触发重渲染 -
.getAttribute('href')读取 HTML 属性（如href、data-id），对布尔属性（如disabled）返回"disabled"或null - 注意：如果 ID 不存在，
document.getElementById()返回null，后续调用.textContent会报Cannot read property 'textContent' of null
const el = document.getElementById('myBtn');
if (el) {
console.log(el.textContent); // "提交"
console.log(el.getAttribute('data-value')); // "123"
}
用 querySelector() 和 querySelectorAll() 更灵活地选中元素
当没有 ID，或需按类名、属性、伪类等条件匹配时，这两个方法更实用。它们返回的是 Element 或 NodeList，操作方式一致。
-
querySelector()只返回第一个匹配项（null表示没找到） -
querySelectorAll()返回所有匹配的NodeList（即使为空，也不为null） - 支持复杂选择器：
querySelector('button[data-type="save"]')、querySelector('.item:last-child') - 获取属性仍用
.getAttribute()；取文本优先用.textContent，除非明确需要 HTML 结构
const btn = document.querySelector('button[data-action="delete"]');
if (btn) {
console.log(btn.textContent.trim()); // 去掉前后空格
}
const items = document.querySelectorAll('.list-item');
items.forEach(item => {
console.log(item.dataset.id); // 读取 data-id 属性（自动转为驼峰）
});
用 .dataset 快速访问 data- 自定义属性
HTML5 的 data-* 属性是常用的数据载体，用 .dataset 访问比 .getAttribute() 更简洁，且自动处理命名转换。
-
data-user-id→el.dataset.userId（连字符转驼峰） -
data-api-url→el.dataset.apiUrl - 如果属性值含数字开头（如
data-1st-place），无法通过点号访问，得用方括号：el.dataset['1st-place'] -
.dataset是只读映射，修改它不会同步更新 HTML 属性；要写入请用.setAttribute()
常见陷阱：innerHTML vs textContent、null 检查、动态内容未加载
很多“取不到内容”的问题其实不是方法错，而是时机或理解偏差。
立即学习“前端免费学习笔记（深入）”；
- 用
.innerHTML读取后又赋值给另一个元素，可能引入 XSS 风险；纯展示文本请坚持用.textContent - 脚本执行早于 DOM 加载？确保放在
