如何访问并修改带id的td元素内img子标签的src属性值

• 你通过document.querySelector("#ROOM11")获取到的是<td>节点，该节点本身没有src属性，所以直接对td调用getAttribute('src')和setAttribute操作都不会生效
• 你给出的示例代码中setAttribute('src',02.png')存在语法错误，字符串02.png左侧缺少单引号，会直接抛出语法异常

共有两种常用实现方式：

方式1：先获取td节点，再查找子元素img #

// 先获取td节点
let cell = document.querySelector("#ROOM11");
// 在td节点的子元素中查找img
let targetImg = cell.querySelector("img");
// 读取src值
console.log(targetImg.getAttribute("src"));
// 修改src值
targetImg.setAttribute("src", "02.png");
// 也可以直接操作dom的src属性
// targetImg.src = "02.png"

方式2：直接通过选择器一步定位到td内的img #

如果不需要单独操作td节点，可以直接用后代选择器定位到目标img：

let targetImg = document.querySelector("#ROOM11 img");
targetImg.src = "02.png";

如果一个td内存在多个img，可以用querySelectorAll获取所有img列表后按下标取对应元素即可。

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