html如何获取_获取HTML元素内容或属性的方法【教程】

最直接的方式是用 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 加载？确保放在