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

雪夜 2026-01-06 00:00:00 次阅读

最直接的方式是用 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 属性（自动转为驼峰）
});