HTML获取元素内容或属性方法详解

本文深入解析了HTML中获取元素内容与属性的三大核心方法：通过ID定位的`document.getElementById()`配合`.textContent`、`.innerHTML`和`.getAttribute()`，更灵活的`querySelector()`/`querySelectorAll()`支持复杂选择器，以及专用于`data-*`属性的便捷`.dataset`接口；同时直击开发者高频踩坑点——如`null`未校验导致崩溃、`innerHTML`与`textContent`误用、动态渲染内容读取失败、表单元素该用`.value`而非文本属性等，强调“先判空、选对API、分清场景”这一简洁高效的实践原则，助你写出更健壮、安全、可维护的DOM操作代码。

用 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()

<div id="box" data-user-id="42" data-api-url="/api/v1/users"></div>
<script>
  const box = document.getElementById('box');
  console.log(box.dataset.userId);     // "42"
  console.log(box.dataset.apiUrl);     // "/api/v1/users"
  box.setAttribute('data-user-id', '43'); // 正确写法
</script>

常见陷阱：innerHTML vs textContent、null 检查、动态内容未加载

很多“取不到内容”的问题其实不是方法错，而是时机或理解偏差。

• 用 .innerHTML 读取后又赋值给另一个元素，可能引入 XSS 风险；纯展示文本请坚持用 .textContent
• 脚本执行早于 DOM 加载？确保放在 前，或监听 DOMContentLoaded
• 内容由 JS 动态插入（如 Vue/React 渲染后）？原生 DOM 方法只能读取当前已存在的节点，不能“等待”框架更新
• 表单元素（<input>、<select>）的值不用 .textContent，而用 .value —— 这是属性，不是文本内容

// ❌ 错误：input 的值不在 textContent 里
console.log(document.getElementById('name').textContent); // ""

// ✅ 正确
console.log(document.getElementById('name').value); // 用户输入的实际值

实际项目里，多数时候你只需要记住三件事：ID 存在才用 getElementById，否则上 querySelector；读数据优先用 .dataset 和 .value；任何取值前先判空或加 if——因为 DOM 查询失败不报错，但后续操作会崩。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~