如何获取表格单元格内span的data-red属性？解决getAttribute报错

错误原因 #

你用obj.innerHTML拿到的是字符串格式的HTML代码，不是DOM元素对象，所以无法调用getAttribute方法，这才触发了TypeError。

正确写法 #

假设obj就是目标<td>元素，下面几种方法都能正确获取属性值：

方法1：用querySelector查找子元素 #

const spn = obj.querySelector('span');
console.log(spn.getAttribute('data-red'));
// 或者更简洁的dataset写法
console.log(spn.dataset.red);

方法2：直接获取第一个子元素（因为td里只有一个span） #

const spn = obj.firstElementChild;
console.log(spn.getAttribute('data-red'));
// 同样支持dataset
console.log(spn.dataset.red);

方法3：如果还没定位到目标td #

可以先通过选择器找到<td>元素，再获取内部span：

const td = document.querySelector('td[headers="due-date"]');
const spn = td.querySelector('span');
console.log(spn.dataset.red);

补充：使用dataset访问时，属性名要去掉data-前缀；如果属性名带连字符（比如data-red-level），需要转成驼峰式redLevel。

内容的提问来源于stack exchange，提问作者ads