如何使用JavaScript DOM获取td标签子元素中id为cate_name的span元素

报错核心原因 #

• getElementById 是document对象的专属方法，普通DOM元素（比如你获取到的td节点）上不存在该方法，所以你调用td.getElementsByID本身就返回undefined，进一步读取属性就会抛出TypeError。
• 方法名拼写错误：你用到的getElementsByID（正确为getElementById，单数Element，结尾d小写）、getElementsTagName（正确为getElementsByTagName，没有前置的s）都是不存在的方法。
• 普通DOM元素（比如span）没有value属性，value仅为表单元素专属，要读取文本内容需要用textContent或innerText。
• getElementsByTagName返回的是类数组格式的HTMLCollection，需要先取下标拿到对应的元素节点，才能读取内容。

正确实现方案 #

方案1：直接通过id获取（id全局唯一时可用）

// 获取span元素
const cateSpan = document.getElementById('cate_name');
// 读取文本内容，trim用于去除内容末尾的空格
const cateName = cateSpan.textContent.trim();
console.log(cateName); // 输出：Rice

方案2：限定在当前td内查找（推荐，避免页面id重复的异常）

所有DOM元素都支持querySelector方法，可以通过选择器精准匹配当前节点下的目标元素：

const cateSpan = td.querySelector('#cate_name');
const cateName = cateSpan.textContent.trim();

方案3：使用getElementsByTagName的正确写法

// 拿到td下所有span的类数组集合，取第一个元素
const cateSpan = td.getElementsByTagName('span')[0];
const cateName = cateSpan.textContent.trim();

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